Redux系列01：从一个简单例子了解action、store、reducer

先看例子

其实，redux的核心概念就是store、action、reducer，从调用关系来看以下所示

store.dispatch(action) --> reducer(state, action) --> final state

能够先看下面的极简例子有个感性的认识，下面会对三者的关系进行简单介绍

// reducer方法, 传入的参数有两个
// state: 当前的state
// action: 当前触发的行为, {type: 'xx'}
// 返回值: 新的state
var reducer = function(state, action){
    switch (action.type) {
        case 'add_todo':
            return state.concat(action.text);
        default:
            return state;
    }
};

// 建立store, 传入两个参数
// 参数1: reducer 用来修改state
// 参数2(可选): [], 默认的state值,若是不传, 则为undefined
var store = redux.createStore(reducer, []);

// 经过 store.getState() 能够获取当前store的状态(state)
// 默认的值是 createStore 传入的第二个参数
console.log('state is: ' + store.getState());  // state is:

// 经过 store.dispatch(action) 来达到修改 state 的目的
// 注意: 在redux里,惟一可以修改state的方法,就是经过 store.dispatch(action)
store.dispatch({type: 'add_todo', text: '读书'});
// 打印出修改后的state
console.log('state is: ' + store.getState());  // state is: 读书

store.dispatch({type: 'add_todo', text: '写做'});
console.log('state is: ' + store.getState());  // state is: 读书,写做

store、reducer、action关联

能够结合上面的代码来看下面几段解释

1. store：对flux有了解的同窗应该有所了解，store在这里表明的是数据模型，内部维护了一个state变量，用例描述应用的状态。store有两个核心方法，分别是getState、dispatch。前者用来获取store的状态（state），后者用来修改store的状态。

   // 建立store, 传入两个参数
   // 参数1: reducer 用来修改state
   // 参数2(可选): [], 默认的state值,若是不传, 则为undefined
   var store = redux.createStore(reducer, []);
   
   // 经过 store.getState() 能够获取当前store的状态(state)
   // 默认的值是 createStore 传入的第二个参数
   console.log('state is: ' + store.getState());  // state is:
   
   // 经过 store.dispatch(action) 来达到修改 state 的目的
   // 注意: 在redux里,惟一可以修改state的方法,就是经过 store.dispatch(action)
   store.dispatch({type: 'add_todo', text: '读书'});

2. action：对行为（如用户行为）的抽象，在redux里是一个普通的js对象。redux对action的约定比较弱，除了一点，action必须有一个type字段来标识这个行为的类型。因此，下面的都是合法的action

   {type:'add_todo', text:'读书'}
   {type:'add_todo', text:'写做'}
   {type:'add_todo', text:'睡觉', time:'晚上'}

3. reducer：一个普通的函数，用来修改store的状态。传入两个参数 state、action。其中，state为当前的状态（可经过store.getState()得到），而action为当前触发的行为（经过store.dispatch(action)调用触发）。reducer(state, action) 返回的值，就是store最新的state值。

   // reducer方法, 传入的参数有两个
   // state: 当前的state
   // action: 当前触发的行为, {type: 'xx'}
   // 返回值: 新的state
   var reducer = function(state, action){
       switch (action.type) {
           case 'add_todo':
               return state.concat(action.text);
           default:
               return state;
       }
   };

关于actionAreator

看到xxCreator总能让人联想到工厂模式，没错，在redux里，actionAreator其实就是action的工厂方法，能够参考下面例子。

actionCreator(args) => action

var addTodo = function(text){
    return {
        type: 'add_todo',
        text: text
    };
};

addTodo('睡觉');  // 返回：{type: 'add_todo', text: '睡觉'}

在redux里，actionAreator并不是是必需的。不过建议用actionAreator代替普通action对象的直接传递。除了可以减小代码量，还能够大大提升代码的可维护性。想象下面的场景再来看回文章开头的例子，应用actionAreator后的代码示例。

store.dispatch(addTodo('睡觉'));
console.log('state is: ' + store.getState());  // state is: 读书,写做,睡觉

相关连接

• redux中文文档：http://camsong.github.io/redu...
• redux英文文档：http://redux.js.org/index.html
• redux源码解读：https://github.com/chyingp/re...