先看例子

其實(shí)，redux的核心概念就是store、action、reducer，從調(diào)用關(guān)系來看如下所示

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

可以先看下面的極簡例子有個(gè)感性的認(rèn)識(shí)，下面會(huì)對(duì)三者的關(guān)系進(jìn)行簡單介紹

// reducer方法, 傳入的參數(shù)有兩個(gè) // state: 當(dāng)前的state // action: 當(dāng)前觸發(fā)的行為, {type: 'xx'} // 返回值: 新的state var reducer = function(state, action){switch (action.type) {case 'add_todo':return state.concat(action.text);default:return state;} };// 創(chuàng)建store, 傳入兩個(gè)參數(shù) // 參數(shù)1: reducer 用來修改state // 參數(shù)2(可選): [], 默認(rèn)的state值,如果不傳, 則為undefined var store = redux.createStore(reducer, []);// 通過 store.getState() 可以獲取當(dāng)前store的狀態(tài)(state) // 默認(rèn)的值是 createStore 傳入的第二個(gè)參數(shù) console.log('state is: ' + store.getState()); // state is:// 通過 store.dispatch(action) 來達(dá)到修改 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關(guān)聯(lián)

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

store：對(duì)flux有了解的同學(xué)應(yīng)該有所了解，store在這里代表的是數(shù)據(jù)模型，內(nèi)部維護(hù)了一個(gè)state變量，用例描述應(yīng)用的狀態(tài)。store有兩個(gè)核心方法，分別是getState、dispatch。前者用來獲取store的狀態(tài)（state），后者用來修改store的狀態(tài)。

// 創(chuàng)建store, 傳入兩個(gè)參數(shù) // 參數(shù)1: reducer 用來修改state // 參數(shù)2(可選): [], 默認(rèn)的state值,如果不傳, 則為undefined var store = redux.createStore(reducer, []);// 通過 store.getState() 可以獲取當(dāng)前store的狀態(tài)(state) // 默認(rèn)的值是 createStore 傳入的第二個(gè)參數(shù) console.log('state is: ' + store.getState()); // state is:// 通過 store.dispatch(action) 來達(dá)到修改 state 的目的 // 注意: 在redux里,唯一能夠修改state的方法,就是通過 store.dispatch(action) store.dispatch({type: 'add_todo', text: '讀書'});

action：對(duì)行為（如用戶行為）的抽象，在redux里是一個(gè)普通的js對(duì)象。redux對(duì)action的約定比較弱，除了一點(diǎn)，action必須有一個(gè)type字段來標(biāo)識(shí)這個(gè)行為的類型。所以，下面的都是合法的action

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

reducer：一個(gè)普通的函數(shù)，用來修改store的狀態(tài)。傳入兩個(gè)參數(shù) state、action。其中，state為當(dāng)前的狀態(tài)（可通過store.getState()獲得），而action為當(dāng)前觸發(fā)的行為（通過store.dispatch(action)調(diào)用觸發(fā)）。reducer(state, action) 返回的值，就是store最新的state值。

// reducer方法, 傳入的參數(shù)有兩個(gè) // state: 當(dāng)前的state // action: 當(dāng)前觸發(fā)的行為, {type: 'xx'} // 返回值: 新的state var reducer = function(state, action){switch (action.type) {case 'add_todo':return state.concat(action.text);default:return state;} };

關(guān)于actionAreator

看到xxCreator總能讓人聯(lián)想到工廠模式，沒錯(cuò)，在redux里，actionAreator其實(shí)就是action的工廠方法，可以參考下面例子。

actionCreator(args) => action var addTodo = function(text){return {type: 'add_todo',text: text}; };addTodo('睡覺'); // 返回：{type: 'add_todo', text: '睡覺'}

在redux里，actionAreator并非是必需的。不過建議用actionAreator代替普通action對(duì)象的直接傳遞。除了能夠減少代碼量，還可以大大提高代碼的可維護(hù)性。想象下面的場景再來看回文章開頭的例子，應(yīng)用actionAreator后的代碼示例。

store.dispatch(addTodo('睡覺')); console.log('state is: ' + store.getState()); // state is: 讀書,寫作,睡覺

相關(guān)鏈接

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

總結(jié)

以上是生活随笔為你收集整理的Redux系列01：从一个简单例子了解action、store、reducer的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。