Redux中间件对闭包的一个巧妙使用

最近在看Redux的源码，发现Redux在使用中间件applyMiddleware.js的源码中，有一个对闭包很是巧妙的使用，解决了“鸡生蛋，蛋生鸡”的问题，特分享给你们。

Redux中间件的函数签名形式以下：

({dispatch, getState}) => next => action => {
   // 函数体
}

applyMiddleware.js中的函数applyMiddleware(...middlewares)用于根据中间件生成action通过的中间件链。先来看一个错误版本的实现：

/*
 * @param {...Function} middlewares The middleware chain to be applied.
 * @returns {Function} A store enhancer applying the middleware.
 */
export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, initialState, enhancer) => {
    var store = createStore(reducer, initialState, enhancer)
    var chain = []

    var middlewareAPI = {
      getState: store.getState,
      dispatch: store.dispatch
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    var dispatch = compose(...chain)(store.dispatch)    //compose(f, g, h) 等价于函数
                                                    //（...args）=>f(g(h(args)))

    return {
      ...store,
      dispatch
    }
  }

核心逻辑是chain = middlewares.map(middleware => middleware(middlewareAPI))和dispatch = compose(...chain)(store.dispatch)这两行。第1句代码是根据中间件生成一个数组chain，chain的元素是签名为next => action => {...}形式的函数，每一个元素就是最终中间件链上的一环。第2句代码利用compose函数，将chain中的函数元素组成一个“洋葱式”的大函数，chain的每一个函数元素至关于一层洋葱表皮。Redux发送的每个action都会由外到内依次通过每一层函数的处理。假设有3层函数，从外到内依次是a,b,c，函数的实际调用过程是，a接收到action，在a函数体内会调用b(a的参数next，指向的就是b)，并把action传递给b，而后b调用c(b的参数next指向的就是c)，同时也把action传递给c，c的参数next指向的是原始的store.dispatch，所以是action dispatch的最后一环。这样分析下来，程序是没有问题的，但当咱们的中间件须要直接使用dispatch函数时，问题就出来了。例如，经常使用于发送异步action的中间件redux-thunk，就须要在异步action中使用dispatch：

export function fetchPosts(subreddit) {  
  return function (dispatch) {
    dispatch(requestPosts(subreddit))
    return fetch(`https://www.reddit.com/r/${subreddit}.json`)
      .then(
        response => response.json(),
        error => console.log('An error occured.', error)
      )
      .then(json =>
        dispatch(receivePosts(subreddit, json))
      )
  }
}

fetchPosts使用的dispatch，是redux-thunk传递过来的，指向的是middlewareAPI对象中的dispatch，实际等于store.dispatch。当执行dispatch(requestPosts(subreddit))时，这个action直接就到了最后一环节的处理，跳过了redux-thunk中间件以后的其余中间件的处理，显然是不合适的。咱们但愿的方式是，这个action依然会从最外层的中间件开始，由外到内通过每一层中间件的处理。因此，这里使用的dispatch函数不能等于store.dispatch，应该等于compose(...chain)(store.dispatch)，只有这样，发送的action才能通过每一层中间件的处理。如今问题出来了，chain = middlewares.map(middleware => middleware(middlewareAPI))须要使用dispatch = compose(...chain)(store.dispatch)返回的dispatch函数，而dispatch = compose(...chain)(store.dispatch)的执行又依赖于chain = middlewares.map(middleware => middleware(middlewareAPI))的执行结果，咱们进入死循环了。

问题的解决方案就是闭包。当咱们定义middlewareAPI的dispatch时，不直接把它指向store.dispatch，而是定义一个新的函数，在函数中引用外部的一个局部变量dispatch，这样就造成了一个闭包，外部dispatch变量的变化会同步反映到内部函数中。以下所示：

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, initialState, enhancer) => {
    var store = createStore(reducer, initialState, enhancer)
    var dispatch = store.dispatch;   // 须要有初始值，保证中间件在初始化过程当中也能够正常使用dispatch
    var chain = []

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)    // 经过闭包引用外部的dispatch变量
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)    //compose(f, g, h) 等价于函数
                                                    //（...args）=>f(g(h(args)))

    return {
      ...store,
      dispatch
    }
  }

这样，“鸡生蛋，蛋生鸡”的问题就解决了。若是这个例子对你来讲太复杂，能够用下面这个简化的例子帮助你理解：

const middleware = ({dispatch}) => (next) => (number) => {
  console.log("in middleware");
  if(number !== 0){
    return dispatch(--number);
  }
  
  return next(number);
}

function test() {
  var dispatch = (number) => { 
    console.log("original dispatch");
    return number;
  };
  var middlewareAPI = {
    dispatch
  }
  
  dispatch = middleware(middlewareAPI)(dispatch);
  
  return {
    dispatch
  }
}

var {dispatch} = test();
dispatch(3);

//输出：
"in middleware"
"original dispatch"

const middleware = ({dispatch}) => (next) => (number) => {
  console.log("in middleware");
  if(number !== 0){
    return dispatch(--number);
  }
  
  return next(number);
}

function test() {
  var dispatch = (number) => { 
    console.log("original dispatch");
    return number;
  };
  var middlewareAPI = {
    dispatch: (number) => {dispatch(number);}
  }
  
  dispatch = middleware(middlewareAPI)(dispatch);
  
  return {
    dispatch
  }
}

var {dispatch} = test();
dispatch(3);

//输出 
"in middleware"
"in middleware"
"in middleware"
"in middleware"
"original dispatch"

第二种方式，middleware中dispatch的number会再次经历中间件的处理，当number=3,2,1,0时，都会进入一次middleware函数，当number=0时，next(0)调用的是test中定义的初始dispatch函数，所以再也不通过middleware的处理。

---

欢迎关注个人公众号：老干部的大前端，领取21本大前端精选书籍！