面試還問redux？那我從頭手擼源碼吧（中間件篇）

昨天的文章手寫了一版redux的核心源碼，redux庫除了數據的狀態管理還有一塊重要的內容那就是中間件，今天我還是嘗試將此部分源碼完成。

中間件

react中管理數據的流程是單向的，就是說，從派發動作一直到發佈訂閱觸發渲染是一條路走到頭，那麼如果想要在中間添加或是更改某個邏輯就需要找到action或是reducer來修改，有沒有更方便的做法呢？

而中間件（middleware）就是一個可插拔的機制，如果想要擴展某個功能，比如添加日誌，在更新前後打印出state狀態，只需要將日誌中間件裝到redux上即可，於是便有了日誌功能，當不想使用時可再拿掉，非常方便。

目前有很多第三方的中間件安裝即可使用，比如剛剛提及的日誌中間件：redux-logger，使用npm安裝它：

npm install redux-logger

redux包提供了一個方法可以裝載中間件：applyMiddleware。在創建store對象的時候，可以傳入第二個參數，它就是中間件：

import { createStore, applyMiddleware } from "redux";
import { reducer } from "./reducer";
import ReduxLogger from "redux-logger";
//使用applyMiddleware加載中間件
let store = createStore(reducer, applyMiddleware(ReduxLogger));

裝載好中間件就在派發動作上擴展了相應的功能，這時我們正常編寫redux程序，當執行dispatch方法時會在控制檯打印出state更新日誌：

以上就是一個使用中間件的例子。

淺析中間件的原理

那麼中間件的執行原理是什麼呢？就用剛剛的日誌中間件舉例，它的功能是在state對象的更新前後分別輸出狀態，那麼肯定是在派發（dispatch）動作的那一刻去實現的，那我們改寫一下redux庫，將“打印日誌”功能添加到dispatch方法裏：

let temp = store.dispatch;//暫存原dispatch方法
store.dispatch = function(action) {
  console.log("舊state：", store.getState());
  temp(action);//執行原dispatch方法
  console.log("新state：", store.getState());
};

這樣就實現了“日誌中間件”，但是直接改寫redux庫是不可能的，我們需要一個通用的辦法去定義中間件，redux提供了這樣一個方法：applyMiddleware。

它的使用方法很簡單，將需要加載的中間件依次傳入applyMiddleware方法中即可：

applyMiddleware(ReduxLogger, ReduxThunk);

手寫applyMiddleware源碼

中間件原理我們分析完了，即然中間件就是擴展dispatch方法，那麼applyMiddlware必然會將中間件的dispatch方法和原始dispatch傳入纔可行，沒錯，我們就看看它的方法簽名：

var applyMiddleware = (middlewares) => (createStore) => (reducer) => {};

以上就是applyMiddleware方法，它又是一個三層的高階函數，這裏用到了函數柯里化的思想，將多個參數拆分爲單一參數的高階函數，以保證每一層只有一個參數，這樣更加靈活可分塊調用。寫成箭頭函數不好理解，我們改寫爲普通函數形式：

var applyMiddleware = function (middlewares){
  return function (createStore){
    return function (reducer){
      //在這裏裝載中間件
    }
  }
};

通過函數參數就可以看到，三層函數分別傳入了中間件（middleware）、創建倉庫方法（createStore）和reducer函數，這正是我們裝載一箇中間件所需要的。

接下來我們的目標就是將中間件提供的dispatch覆蓋redux原有的dispatch方法，這樣就“裝載”好了中間件。

var applyMiddleware = function (middlewares) {
    return function (createStore) {
        return function (reducer) {
            let store = createStore(reducer);
            //調用中間件，返回新dispatch方法
            let newDispatch = middlewares(store)(store.dispatch);
            //覆蓋原有的dispatch方法並返回倉庫對象
            return {
                ...store,
                dispatch: newDispatch
            }
        }
    }
}

有了通用寫法，我們自己模擬實現一個日誌中間件：

function reduxLogger(store) {
    return function (dispatch) {
        //dispatch參數即原redux派發方法
        return function (action) {
            //返回的這個函數即新方法
            //最終會傳入applyMiddleware覆蓋掉dispatch
            console.log(`更新前：${JSON.stringify(store.getState())}`);
            dispatch(action);
            console.log(`更新後：${JSON.stringify(store.getState())}`);
        }
    }
}

調用我們自己的方法裝載中間件：applyMiddleware(reduxLogger);，運行效果如下：

組合中間件

但是到現在還沒完，還記得官方redux庫嗎？人家的applyMiddlewares方法是支持傳入多箇中間件的，如：applyMiddlewares(middleware1,middleware2); 我們目前的方法還不支持這種寫法，最終的目的是想把若干個中間件一次組合爲一個整體，一起加載。

洋蔥模型

洋蔥模型的概念似乎是在Koa2框架中提出的，它是指中間件的執行機制，當多箇中間件執行時，後一箇中間件會套在前一箇中間件的裏面：

執行完一箇中間件會一直向裏走，直到最後一個執行結束，再從內而外走出，就像是在剝洋蔥一樣。

compose方法

我們同樣使用洋蔥模型來寫一個組合方法，以達到目的。

新建一個compose.js，創建一個組合函數：

/**
 * 組合所有中間件
 * @param  {...any} middlewares 
 */
function compose(...middlewares) {
    return function (...args) {

    }
}

我的目標是當調用組合函數，傳入多箇中間件，將所有的中間件組合成一個函數：

var all = compose(middleware3, middleware2, middleware1);
all();//調用時，依次執行所有中間件

我們動手實現它。

寫之前我們先想一下，組合功能即是將“若干”個功能封裝爲“一個”功能，這正是函數式編程的收斂思想，ES6中已經爲我們提供了reduce函數，在這裏最合適不過了：

/**
 * 組合所有中間件
 * @param  {...any} middlewares 
 */
function compose(...middlewares) {
  //args即第一個中間件所需參數
  return function (...args) {
    return middlewares.reduce((composed, current) => {

      return function (...args) {
        //當前中間件的執行結果即上一個中間件的參數
        return composed(current(...args));
      }
    })(...args);
  }
}

通過reduce函數，一步一步將後一箇中間件套到前一箇中間件之中，後一箇中間件的結果即前一個的參數，這樣層層遞近，最終返回一個大函數，即完成組合。

最後可以優化爲箭頭函數的形式，顯得逼格更高一點：

function compose(...middlewares) {
  return (...args) => middlewares.reduce((composed, current) => (...args) => composed(current(...args)))(...args)
}

完成中間件裝載

在compose完成之後，最後一步的工作就是改寫applyMiddlewares將所有傳入的中間件組合好：

function applyMiddleware(...middlewares) {
    return function (createStore) {
        return function (reducer) {
            let store = createStore(reducer);
            //一次傳入多箇中間件，循環包開一層函數
            let chain = middlewares.map(middleware => {
                return middleware(store);
            });

            //組合所有的中間件
            let newDispatch = compose(...chain)(store.dispatch);
            //覆蓋原有的dispatch方法
            return {
                ...store,
                dispatch: newDispatch
            }
        }
    }
}

至此，redux庫的源碼已經基本實現完畢。

多箇中間件運行如下：

尾巴

這兩天從頭手寫了一遍redux庫發現redux的源碼量並不大但是邏輯還是很複雜的，理清redux的流程是讀寫源碼的前提。而中間件則是redux庫的一個難點，主要是層層調用關係非常惱人，一個好辦法是通過庫源碼與中間件源碼對比來分析，理清思路即可，如果還有時間我會嘗試再手寫一版react-redux庫，一個是學習提高，二是應付面試。