面试还问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库，一个是学习提高，二是应付面试。