前言:
筆者之前也有一篇關(guān)于applyMiddleware的總結(jié)。是applyMiddleware的淺析。
現(xiàn)在閱讀了一下redux的源碼。下面說說我的理解。
概要源碼:
step 1:
applyMiddleware(thunkMiddleware, createLogger())
第一次執(zhí)行applyMiddleware增加兩個中間件;使用閉包保存中間件;然后返回一個函數(shù)(一開始我奇怪了為什么參數(shù)是createStore???)
step 2:
為什么參數(shù)是createStore? 我看了createStore的源碼我就知道了。
我們使用redux的時候是這樣調(diào)用的
createStore( rootReducers, //reducer preloadedState, applyMiddleware( //enhancer thunkMiddleware, createLogger() ) )
在第一次調(diào)用createStore的時候,
createStore先判斷是否有middlewares(enhancer)的加入,如果有,就不執(zhí)行createStore后面的操作,return出去執(zhí)行enhancer()
注意:執(zhí)行了 enhancer(createStore) 后,只傳入了兩個參數(shù) (reducer, preloadState) ,第三個enhancer 為undefine
step 3:
執(zhí)行 enhancer 就要回過頭看applyMiddleware源碼。
由于沒有第三個參數(shù)enhancer,所以這才是真正執(zhí)行 createStore(), 返回一個沒有 middleware 的 store。
step 4:
首先為每一個middleware以{getState,dispatch}為參數(shù)執(zhí)行一遍,其實是為了給middleware一個原生的{getState,dispatch}兩個方法的指針。以便在middleware中調(diào)用。
請看一個簡單的middleware
const logger = fucntion({getState, dispatch}) { return function(next) { return function(action){ console.log('dispatching', action) let result = next(action) console.log('next state', getState()) return result } } }
調(diào)用后返回的 chain 是一個以next為參數(shù)的函數(shù)數(shù)組。
step 5:
_dispatch = _compose2['default'].apply(undefined, chain)(store.dispatch)
這個_compose2是redux的compose方法,
紅框框內(nèi)的 arguments === store.dispatch,
因此compose后返回的_dispatch是多個middleWares嵌套而成的函數(shù),每一個next閉包變量都是里層的middleware,并且最終的next是store.dispatch
step last:
用新的middleware多層嵌套的_dispatch代替store.dispatch,就over了
結(jié)論:
middleware內(nèi)部的dispatch是原生的沒有middleware時的dispatch,
每一個middleware都帶有原生的getState,dispatch和next(下一個middleware),所以我可以在middleware中不調(diào)用next,而直接調(diào)用dispatch,就跳過了后面的middleware了。
http://www.cnblogs.com/miaowwwww/p/6533760.html