Redux原理(一):Store實現分析
Redux原理(一):Store實現分析
寫在前面
寫React也有段時間了,一直也是用Redux管理資料流,最近正好有時間分析下原始碼,一方面希望對Redux有一些理論上的認識;另一方面也學習下框架程式設計的思維方式。
Redux如何管理state
註冊store tree
1、Redux通過全域性唯一的store物件管理專案中的state
var store = createStore(reducer,initialState);
2、可以通過store註冊listener,註冊的listener會在store tree每次變更後執行
store.subscribe(function () {
console.log("state change");
});
如何更新store tree
1、store呼叫dispatch
,通過action把變更的資訊傳遞給reducer
var action = { type: 'add'};
store.dispatch(action);
2、store根據action攜帶type
在reducer中查詢變更具體要執行的方法,執行後返回新的state
export default (state = initialState, action)=>{
switch (action.type) {
case 'add':
return {
count:state.count + 1
}
break;
default:
break;
}
}
3、reducer執行後返回的新狀態會更新到store tree中,觸發由store.subscribe()
註冊的所有listener
Store實現
主要方法:
- createStore
- combineReducers
- bindActionCreators
- applyMiddleWare
- compose
createStore原始碼分析
檢視完整createStore
請戳這裡createStore
方法用來註冊一個store,返回值為包含了若干方法的物件,方法體如下:
export var ActionTypes = {
INIT: '@@redux/INIT'
}
export default function createStore(){
function getState(){}
function dispatch(){}
function subscribe(){}
function replaceReducer(){}
dispatch({ type: ActionTypes.INIT })
return {
dispatch,
subscribe,
getState,
replaceReducer
}
}
下面逐個程式碼段分析功能createStore
完整函式宣告如下:
createStore(
reducer:(state, action)=>nextState,
preloadedState:any,
enhancer:(store)=>nextStore
)=>{
getState:()=>any,
subscribe:(listener:()=>any)=>any,
dispatch:(action:{type:""})=>{type:""},
replaceReducer:(nextReducer:(state, action)=>nextState)=>void
}
可以看出整個函式是一個閉包結構。引數有三個,返回值公開出若干方法
- dispatch:分發action
- subscribe:註冊listener,監聽state變化
- getState:讀取store tree中所有state
- replaceReucer:替換reducer,改變state更新邏輯
當然,createStore
內部處理了其過載形式,即:可以不傳preloadedState
createStore(
reducer:(state, action)=>nextState,
enhancer:(store)=>nextStore
)
引數:
- reducer: reducer必須是一個function型別,此方法根據action.type更新state
- preloadedState: store tree初始值
- enhancer: enhancer通過新增middleware,增強store功能
前置操作
進入createSore
首先執行如下操作:
- [40-43] 用於支援兩種引數列表形式
createStore(reducer,preloadedState,enhancer)
和createStore(reducer,enhancer)
- [45-48][53-55] 校驗reducer和enhancer的型別(必須為function)
重點分析下50行:
return enhancer(createStore)(reducer, preloadedState)
本語句執行了外部傳入的enhancer,接收舊createStore
,返回一個新createStore
並執行,此過程形成一次遞迴;
那麼遞迴什麼時候停止呢?
可以看到,新createStore
執行時,僅有reducer和preloadedState兩個引數,再次執行到45行時,不會進入if條件 故不會再形成第二次遞迴,此時遞迴停止;
理論上,createStore
僅被增強了一次,那如果希望對其進行多次增強該怎麼辦呢?
Redux提供了compose
和applyMiddleWare
方法,用來在Store上註冊中介軟體,由此來實現多次增強。
getState()
getState
方法比較簡單,直接返回當前store tree狀態
- [57-61] 定義了createStore內部要用到的全域性變數。其中
currentReducer
、currentState
聲明當前reducer方法集合和store tree狀態,初始值為外部傳入的createStore
引數,currentListeners
和nextListeners
定義了存放store變化時要執行響應函式的陣列集合
subscribe()
Redux採用了觀察者模式,store內部維護listener陣列,用於儲存所有通過store.subscrib
註冊的listener,store.subscrib
返回unsubscrib
方法,用於登出當前listener;當store tree更新後,依次執行陣列中的listener
具體程式碼如下:
dispatch()
dispatch
方法主要完成兩件事:
1、根據action查詢reducer中變更state的方法,更新store tree
2、變更store tree後,依次執行listener中所有響應函式
- [168-173] 通過currentReducer和action,更新當前的store tree
- [175-181] 當state tree變更後,依次執行所有註冊的listener
有個問題需要注意:
方法中使用了全域性定義的isDispatching
用於給變更中的store tree加鎖;即:只有當本次store tree變更完畢後,才允許執行下一次變更,避免store tree響應多個變更時,結果不同步的問題;但事實上,這種寫法也決定了,目前的store tree只能響應同步變更(非同步變更需要通過新增中介軟體實現)
replaceReducer()
replaceReducer
用於替換操作store tree中state的方式
整個方法程式碼量不多,從外部接收新的reducer方法後,替換掉內部舊的ruducer。
需要注意一下199行的dispatch
方法,這一行主動觸發了一次變更。由於每次dispatch
執行後,redux都會執行reducer或子reducer方法(如果使用了combineReducers
),所以這一行的作用就是在初始化store tree中所有的state節點。
小結
以上就是整個createStore
方法的主要實現過程,其中dispatch
方法為控制整個store tree變更的核心方法。觸發store tree變更的方式只有一個,就是dispatch
一個action
combineReducers原始碼分析
為什麼需要combineReducers
結合上面store tree變更的過程,我們可以看到,真正導致變更的核心程式碼就是:
currentState = currentReducer(currentState, action)
試想,若整個專案只通過一個reducer方法維護整個store tree,隨著專案功能和複雜度的增加,我們需要維護的store tree層級也會越來越深,當我們需要變更一個處於store tree底層的state,reducer中的變更邏輯會十分複雜且臃腫。
而combineReducers
存在的目的就是解決了整個store tree中state與reducer一對一設定的問題。我們可以根據專案的需要,定義多個子reducer方法,每個子reducer僅維護整個store tree中的一部分state, 通過combineReducers
將子reducer合併為一層。這樣我們就可以根據實際需要,將整個store tree拆分成更細小的部分,分開維護。
程式碼實現
combineReducers
完整程式碼請戳這裡
整個函式體結構如下:
combineReducers(
reducers:Object
)=> reducer(
state:any,
action:{type:""}
)
引數reducers是一個Object物件,其中包含所有待合併的子reducer方法
返回值是合併後的reducer方法,在執行此方法時,會在已合併的所有子reducer中查詢要執行的reducer,並執行,變更其對應的state片段。
下面逐個程式碼段分析具體實現:
以上這部分主要用於規範化儲存子ruducer的reducers物件
- [103-115] 過濾掉reducers物件中所有非function型別的reducer,合法的結果儲存在
finalReducers
物件中 - [116-127] 通過
assertReducerSanity
方法校驗所有子reducer的初始值和執行後結果是否為空,是則提示錯誤。
以上這段程式碼為combineReducers
的核心程式碼,其返回一個function,用於查詢真正要變更的state片段
- [141-154] 遍歷規範化後的
finalReducers
,獲取到當前key對應的子reducer和子state,執行reducer得到當前state片段更新後的狀態,並更新到整個store tree中。
其中129行中的state,應該是整個store tree對應的state,首次獲取previousStateForKey
時,值可能為undefined,那麼接下來執行var nextStateForKey = reducer(previousStateForKey, action)
實際上是依次為每個子state片段進行初始化。 - [153] 本行判定store tree是否被更新,其中
nextStateForKey !== previousStateForKey
直接通過引用關係判斷state是否變更。故一定要注意,定義reducer方法時,一定要遵循函數語言程式設計,確保傳入的state與返回的state不要存在引用關係,否則可能導致store tree中狀態無法更新。
小結
至此,我們可以看到combineReducers
方法,實際就是在每次要執行reducer時,通過action.type定義的型別進行查詢,獲得子reducer並執行。
通過以上分析,我們需要注意兩個問題:
1、子reducer遵循函數語言程式設計,不要直接變更作為引數傳入的state,變更state後,一定要返回一個新state物件,不要跟引數state建立引用關係(可以使用Immutable處理state)
2、由於combineReducers
內部僅通過action.type作為查詢當前要執行的子reducer的依據,會更新所有查詢到的state片段,故不建議子reducer中,action.type的值出現重複,否則可能會誤更新state。