Redux是一個(gè)數(shù)據(jù)框架丘薛,下圖為redux的工作流。
Redux工作流
1. 工作流的解釋
組件通過store.dispatch()方法發(fā)送action對(duì)象給store幕袱,store自動(dòng)將prevState和action發(fā)送給reducers土砂,reducers
將newState返回給store,由此store中存放的state得到了更新浙值,再由組件的subscribe()方法監(jiān)聽到store的變化,重新調(diào)用
store.getState()方法檩小,組件中的state也就隨之更新开呐。
Action對(duì)象的編寫:
- action.type可以拆分在一個(gè)獨(dú)立的js文件中,以常量的形式定義然后在組件中引用识啦,這樣可以防止字符串編寫錯(cuò)誤;
- 用actionCreators來統(tǒng)一創(chuàng)建并返回創(chuàng)建的action對(duì)象神妹。
2. 設(shè)計(jì)和使用三原則
1. store是唯一的颓哮!
整個(gè)應(yīng)用中(包含多個(gè)組件),只有一個(gè)store作為公共存儲(chǔ)空間鸵荠。
2. 只有store能改變自己的內(nèi)容冕茅!
它在接收到reducer的新數(shù)據(jù)后更新store中的數(shù)據(jù)。
3. reducer必須是純函數(shù)!
純函數(shù):給定固定的輸入姨伤,就一定會(huì)有固定的輸出哨坪,而且不會(huì)有任何副作用。
(不純的乍楚,比如有異步操作(Ajax)当编、Date對(duì)象相關(guān)的操作)
沒有副作用:不對(duì)傳入的參數(shù)進(jìn)行任何修改。
export default (state = defaultState, action) => {
為什么要給state設(shè)置defaultState默認(rèn)值徒溪?
因?yàn)樵趯?duì)store中的state做第一次修改時(shí)(即第一次傳入action)忿偷,state并不存在,因此默認(rèn)給state賦值為defaultState臊泌,讓action在> >defaultState的基礎(chǔ)上修改數(shù)據(jù)鲤桥。
3. 牢記4個(gè)方法:
- createStore()
- store.dispatch()
- store.getState()
- store.subscribe() (訂閱store的變化)