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...