前言:

  筆者之前也有一篇關(guān)于applyMiddleware的總結(jié)。是applyMiddleware的淺析。

  現(xiàn)在閱讀了一下redux的源碼。下面說說我的理解。

概要源碼:

  photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

step 1:

   applyMiddleware(thunkMiddleware, createLogger()) 

  第一次執(zhí)行applyMiddleware增加兩個中間件;使用閉包保存中間件;然后返回一個函數(shù)(一開始我奇怪了為什么參數(shù)是createStore???)  

step 2:

  為什么參數(shù)是createStore? 我看了createStore的源碼我就知道了。

  photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

  我們使用redux的時候是這樣調(diào)用的

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

  在第一次調(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

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

    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
            }
        }
    }

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

  調(diào)用后返回的 chain 是一個以next為參數(shù)的函數(shù)數(shù)組。

step 5:

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

  這個_compose2是redux的compose方法,

   photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

  紅框框內(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