redux:applyMiddleware源碼解讀

前言：

　　筆者以前也有一篇關於applyMiddleware的總結。是applyMiddleware的淺析。

　　如今閱讀了一下redux的源碼。下面說說個人理解。

概要源碼：

　　

step 1：

　　 applyMiddleware(thunkMiddleware, createLogger()) 

　　第一次執行applyMiddleware增長兩個中間件；使用閉包保存中間件；而後返回一個函數（一開始我奇怪了爲何參數是createStore？？？）　　

step 2：

　　爲何參數是createStore？ 我看了createStore的源碼我就知道了。

　　

　　咱們使用redux的時候是這樣調用的

createStore(
    rootReducers,    //reducer
    preloadedState,
    applyMiddleware( //enhancer
        thunkMiddleware,
        createLogger()
    )
)

　　在第一次調用createStore的時候，

　　createStore先判斷是否有middlewares（enhancer）的加入，若是有，就不執行createStore後面的操做，return出去執行enhancer()

　　注意：執行了  enhancer(createStore)  後，只傳入了兩個參數  (reducer, preloadState)   ，第三個enhancer 爲undefine

step 3:

　　執行 enhancer 就要回過頭看applyMiddleware源碼。

　　因爲沒有第三個參數enhancer，因此這纔是真正執行 createStore(), 返回一個沒有 middleware 的 store。

step 4：

　　首先爲每個middleware以{getState，dispatch}爲參數執行一遍，實際上是爲了給middleware一個原生的{getState，dispatch}兩個方法的指針。以便在middleware中調用。

　　請看一個簡單的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
            }
        }
    }

　　調用後返回的 chain 是一個以next爲參數的函數數組。

step 5:

　　 _dispatch = _compose2['default'].apply(undefined, chain)(store.dispatch)  

　　這個_compose2是redux的compose方法，

 　　

　　紅框框內的 arguments === store.dispatch, 

　　所以compose後返回的_dispatch是多個middleWares嵌套而成的函數，每個next閉包變量都是裏層的middleware，而且最終的next是store.dispatch

step last：

　　用新的middleware多層嵌套的_dispatch代替store.dispatch，就over了

結論：

　　middleware內部的dispatch是原生的沒有middleware時的dispatch，

　　每個middleware都帶有原生的getState，dispatch和next（下一個middleware），因此我能夠在middleware中不調用next，而直接調用dispatch，就跳過了後面的middleware了。