Redux系列01：從一個簡單例子了解action、store、reducer

本文轉載自查看原文 2015-12-27 18:55 9383 redux/ 開源庫/框架使用與源碼分析

其實，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關聯

可以結合上面的代碼來看下面幾段解釋

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: '讀書'});

action：對行為（如用戶行為）的抽象，在redux里是一個普通的js對象。redux對action的約定比較弱，除了一點，action必須有一個type字段來標識這個行為的類型。所以，下面的都是合法的action

{type:'add_todo', text:'讀書'} {type:'add_todo', text:'寫作'} {type:'add_todo', text:'睡覺', time:'晚上'}

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系列01：從一個簡單例子了解action、store、reducer

store、reducer、action關聯

關於actionAreator

相關鏈接

免責聲明！