redux学习案例

redux的作用

redux解决了react组件状态的两个问题:

1.组件作用域封闭，独立组件间实现状态通信困难；
2.组件的视图层和状态耦合紧密，在某些复杂和组件数量多的情况下管理组件状态很麻烦；
有了redux,我们分离了视图和状态的统一管理（事实上我们更多时间是在做着管理状态的工作）这样显得更合理和方便。

redux工作的基本步骤：

1.创建一个管理整个应用状态的对象，这是redux的核心对象（下称store对象）；
2.store对象通过广播形式发布改变store状态的action对象，致使store获得新状态组，并使各组件能监听到store的状态组变化；
3.各组件监听store的状态变化，检测到变化后重新渲染状态或视图；
这里提供一个简单示例，附有较为详细的步骤注释：

import { createStore } from 'redux';
import * as React from "react";
import * as ReactDom from "react-dom";

//生成新action的业务函数
let addAction = function(cont){
return {
   type:"aa",
   content:cont
}
}
//重计算生成新状态， 默认两个必须参数，第一个表示现有状态，另一个是action对象
let reducer = function(state,action){
    return action.content;
}

//生成管理状态组的新对象store,并设置每次广播先触发reducer函数生成新状态
let store = createStore(reducer);
let num = 0;
setInterval(function(){
//每隔1秒广播一次，刷新store
store.dispatch(addAction(++num));
},1000);

let Hello = React.createClass({
getInitialState:function(){
var that = this;
//监测store变化,store变化时触发该函数
store.subscribe(function(){
    that.setState(
        {
            data : store.getState()
        }
    );
});
return {
    data:"initData"
};
},
render:function(){
return(
    <div>
         <p>{this.state.data}</p>
    </div>
);
}
});

ReactDom.render(
<Hello></Hello>,
document.getElementById("app")
);

/*总结：
redux将state的作用域外露，致使每个组件都可以改变和获取全局的state信息
*/