理解Javascript的状态容器Redux(2)

前面描述过，Redux不允许直接去改变state，必须通过转发action来告诉store有这个意图要去改变这个状态。reducer正是扮演处理转发过来的action的意图的函数并且可以改变状态的角色。一个reducer接受当前的state作为参数，通过返回新的state去改变原有的state:

var someReducer = function(state, action) { ... return state; }

由于reducer是纯函数，需要注意：

不允许在reducer函数内部进行网络调用或者数据库查询操作

不能改变它的参数
这样做的好处是：每次调用同样的一个函数，传入相同的值可以得到相同的结果。对系统的其它部分也不会产生副作用。

第一个Redux store

使用Redux.createStore()来创建一个store，并且将所有的reducers作为参数传递给它，此处以一个reducer为例子：

var userReducer = function(state=[], action) { if (action.type === 'ADD_USER') { var newState = state.concat([action.user]); return newState; } return state; } // 创建一个store，并且将reducer作为参数传递给它 var store = Redux.createStore(userReducer); // 将action传递给store，告诉store我们有改变状态的意向 store.dispatch({ type: 'ADD_USER', user: {name: 'cpselvis'} });

上述代码运行后发生的事情：

Store被创建

reducer确定初始的state的值是空数组

action被转发给store

reducer将newUser添加到state中，并且将它返回，更新store

通过这段代码可以发现：reducer函数实际上被执行了2次，一次时store创建的时候，一次是action被转发之后。另外需要注意：Redux希望reducer函数总是返回一个新的状态。这时的结果：

store.getState(); // => [{name: 'cpselvis'}]

到这里，component -> action -> store -> reducer -> state 的单向数据流的问题就讲完了。概括的说就是：React组件里面获取了��据之后（比如ajax请求），然后创建一个action通知store我有这个想改变state的意图，然后reducers（一个action可能对应多个reducer，可以理解为action为订阅的主题，可能有多个订阅者）来处理这个意图并且返回新的state，接下来store会收集到所有的reducer的state，最后更新state。