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