摘要：最后看一下這時(shí)候執(zhí)行返回，如下調(diào)用執(zhí)行循序調(diào)用第層中間件返回即調(diào)用第層中間件返回即調(diào)用根返回即調(diào)用一個(gè)例子讀懂上文提到是個(gè)柯里化函數(shù)，可以看成是將所有函數(shù)合并成一個(gè)函數(shù)并返回的函數(shù)。

由于一直用業(yè)界封裝好的如redux-logger、redux-thunk此類的中間件，并沒有深入去了解過redux中間件的實(shí)現(xiàn)方式。正好前些時(shí)間有個(gè)需求需要對(duì)action執(zhí)行時(shí)做一些封裝，于是借此了解了下Redux Middleware的原理。

首先簡(jiǎn)單提下什么是中間件，該部分與下文關(guān)系不大，可以跳過。來看眼這個(gè)經(jīng)典的圖。

不難發(fā)現(xiàn)：

不使用middleware時(shí)，在dispatch(action)時(shí)會(huì)執(zhí)行rootReducer，并根據(jù)action的type更新返回相應(yīng)的state。

而在使用middleware時(shí)，簡(jiǎn)言之，middleware會(huì)將我們當(dāng)前的action做相應(yīng)的處理，隨后再交付rootReducer執(zhí)行。

比如現(xiàn)有一個(gè)action如下：

function getData() {
  return {
      api: "/cgi/getData",
      type: [GET_DATA, GET_DATA_SUCCESS, GET_DATA_FAIL]
  }
}

我們希望執(zhí)行該action時(shí)可以發(fā)起相應(yīng)請(qǐng)求，并且根據(jù)請(qǐng)求結(jié)果由定義的type匹配到相應(yīng)的reducer，那么可以自定義方法處理該action，因此該方法封裝成中間件之前可能是這樣的：

async function dispatchPre(action, dispatch) {
    const api = action.api;
    const [ fetching_type, success_type,  fail_type] = action.type;
    // 拉取數(shù)據(jù)
    const res = await request(api);
    
    // 拉取時(shí)狀態(tài)
    dispatch({type: fetching_type});
    // 成功時(shí)狀態(tài)
    if (res.success) {
        dispatch({type: success_type, data: res.data});
        console.log("GET_SUCCESS");
    }
    // 失敗時(shí)狀態(tài)
    if (res.fail) {
        dispatch({type: fail_type});
        console.log("GET_FAIL");
    };
}

// 調(diào)用: dispatchPre(action(), dispatch)

那如何封裝成中間件，讓我們?cè)诳梢灾苯釉?b>dispatch(action)時(shí)就做到這樣呢？可能會(huì)首先想到改變dispatch指向

// 儲(chǔ)存原來的dispatch
const dispatch = store.dispatch;
// 改變dispatch指向
store.dispatch = dispatchPre;
// 重命名
const next = dispatch;

截止到這我們已經(jīng)了解了中間件的基本原理了～

了解了基本原理能有助于我們更快地讀懂middleware的源碼。
業(yè)務(wù)中，一般我們會(huì)這樣添加中間件并使用。

createStore(rootReducer, applyMiddleware.apply(null, [...middlewares]))

接下來我們可以重點(diǎn)關(guān)注這兩個(gè)函數(shù)createStore、applyMiddleware

// 摘至createStore
export function createStore(reducer, rootState, enhance) {
    ...
    if (typeof enhancer !== "undefined") {
        if (typeof enhancer !== "function") {
          throw new Error("Expected the enhancer to be a function.")
        }
    /*
        若使用中間件，這里 enhancer 即為 applyMiddleware()
        若有enhance，直接返回一個(gè)增強(qiáng)的createStore方法，可以類比成react的高階函數(shù)
    */
    return enhancer(createStore)(reducer, preloadedState)
  }
  ...
}

再看看applyMiddleware做了什么，applyMiddleware函數(shù)非常簡(jiǎn)單，就十來行代碼，這里將其完整復(fù)制出來。

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        `Dispatching while constructing your middleware is not allowed. ` +
          `Other middleware would not be applied to this dispatch.`
      )
    }

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    // 1、將store對(duì)象的基本方法傳遞給中間件并依次調(diào)用中間件
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 2、改變dispatch指向，并將最初的dispatch傳遞給compose
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

根據(jù)源碼，我們可以將其主要功能按步驟劃分如下：

1、依次執(zhí)行middleware。

將middleware執(zhí)行后返回的函數(shù)合并到一個(gè)chain數(shù)組，這里我們有必要看看標(biāo)準(zhǔn)middleware的定義格式，如下

export default store => next => action => {}

// 即
function (store) {
    return function(next) {
        return function (action) {
            return {}
        }
    }
}

那么此時(shí)合并的chain結(jié)構(gòu)如下

[    ...,
    function(next) {
        return function (action) {
            return {}
        }
    }
]

2、改變dispatch指向。

想必你也注意到了compose函數(shù)，compose函數(shù)如下：
[...chain].reduce((a, b) => (...args) => a(b(...args)))
實(shí)際就是一個(gè)柯里化函數(shù)，即將所有的middleware合并成一個(gè)middleware，并在最后一個(gè)middleware中傳入當(dāng)前的dispatch。

*compose可能會(huì)看得有點(diǎn)蒙，不理解柯里化函數(shù)的同學(xué)可以跳到一個(gè)例子讀懂compose先了解下。

// 假設(shè)chain如下：
chain = [
    a: next => action => { console.log("第1層中間件") return next(action) }
    b: next => action => { console.log("第2層中間件") return next(action) }
    c: next => action => { console.log("根dispatch") return next(action) }
]

調(diào)用compose(...chain)(store.dispatch)后返回a(b(c(dispatch)))。
可以發(fā)現(xiàn)已經(jīng)將所有middleware串聯(lián)起來了，并同時(shí)修改了dispatch的指向。
最后看一下這時(shí)候compose執(zhí)行返回，如下

dispatch = a(b(c(dispatch)))

// 調(diào)用dispatch(action)
// 執(zhí)行循序
/*
   1. 調(diào)用 a(b(c(dispatch)))(action) __print__: 第1層中間件
   2. 返回 a: next(action) 即b(c(dispatch))(action)
   3. 調(diào)用 b(c(dispatch))(action) __print__: 第2層中間件
   4. 返回 b: next(action) 即c(dispatch)(action)
   5. 調(diào)用 c(dispatch)(action) __print__: 根dispatch
   6. 返回 c: next(action) 即dispatch(action)
   7. 調(diào)用 dispatch(action)
*/

上文提到compose是個(gè)柯里化函數(shù)，可以看成是將所有函數(shù)合并成一個(gè)函數(shù)并返回的函數(shù)。
例如先定義3個(gè)方法

function A(x){
    return x + "a"
}

function B(y){
    return y + "b"
}

function C(){
    return "c"
}

var d = [...A, b, C].reduce((a, b) => (d) => {console.log(d, a, b); a(b(d))})

d // 打印d

// f (d) { console.log(d, a, b); return a(b(d)) }

d("d") // 調(diào)用d

/*
 * d
 * f(d) { console.log(d, a, b); return a(b(d)) }
 * f C() { return "c" }
*/

/*
 * c
 * f A(x) { return x + "a" }
 * f B(y) { return y + "b" }
*/

不難發(fā)現(xiàn)，使用閉包，在調(diào)用d的時(shí)候，將a、b函數(shù)儲(chǔ)存在了內(nèi)存中，調(diào)用時(shí)會(huì)依次將數(shù)組從右至左的函數(shù)返回做為參數(shù)傳遞給下一個(gè)函數(shù)使用