redux中间件源码解析

它提供了一个分类处理action的机会。在中间件中，可以检阅每个流过的action，挑选出特定类型的action进行相应的操作，提供一次改变action的机会。

通过中间件，我们可以在dispatch action之后，到达reducer之前，搞点事情。比如：打印，报错，跟异步API通信等等

下面，让我们一步步来理解下中间件是如何实现的：
我们从createStore.js调用中间件的地方开始理解：

export default function createStore(reducer, preloadedState, enhancer) {
// 如果第二个参数没有传入初始的state，而是传入了enhancer
// applyMiddleware调用的返回值, 那就将第二个参数，preloadedState赋值给enhancer
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }
}
if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }
    // 当enhancer不为空且为函数时，就执行该函数，并return回去，作为creatStore的返回值。
    return enhancer(createStore)(reducer, preloadedState)
  }

理解middleware机制

redux提供了applyMiddleware方法来加载中间件，先来看下总览：

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    ....
    ....
    ....
    return {
      ...store,
      dispatch
    }
  }

applyMiddleware接受不定数量的中间件，然后返回一个接受一个creatStore作为参数的函数的函数。回去再看下我们的creatStore:

if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }
    // 当enhancer不为空且为函数时，就执行该函数，并return回去，作为creatStore的返回值。
    return enhancer(createStore)(reducer, preloadedState)
  }

当enhancer不为空且为函数时，就执行该函数，并return回去，作为creatStore的返回值。回忆下我们在redux中怎样使用中间件的

const store = createStore(reducers, applyMiddleware(a, b, c));

其实enhancer就是applyMiddleware的结果。也就是createStore => (...args) => {}

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    // 声明一个dispatch
    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)
    }
    // 第一步把middlewares里的函数带着middlewareAPI这个参数都挨个执行，
    //然后保存在chain数组中。也就是middleware中的第一个参数，返回 next => action => {...}
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 问题：compose是如何将中间件串联在一起的?
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

compose.js怎么组合函数的呢？

return funcs.reduce((a, b) => (...args) => a(b(...args)))
一脸蒙蔽，这是什么？
现在假设我们需要组合两个函数：

var f1 = function(a) {
    return a * 10;
}

var f2 = function(a) {
    return a + 1;
}

function compose(f1, f2) {
    return function(x) {
        return f1(f2(x))
    }
}

var number = compose(f1, f2)(4) 

让代码从右向左运行变成f1(f2(x))，4 -> f2 -> f1 -> 50
现在我们修改下compose函数

let compose = (...funs) => (result) => {
    for (var i = funs.length - 1; i > -1; i--) {
      result = funs[i].call(this, result);
    }
    
    return result;
}
var number = compose(f1, f2)(4)

我们再回到redux的compose.js
return funcs.reduce((a, b) => (...args) => a(b(...args)))
拆分上面的源码步骤如下：

1. 返回 (...args) => a(b(...args)且与下一个c函数做计算
2. a 等于 (...args) => a(b(...args) ，b 等于 c 这个function ， 然后再一次做 (...args) => a(b(...args))计算，就形成了(c(...args)) => a(b(...args))返回 a(b(c(...args)))
3. 所以compose其实就是实现了组合运算(...args) => f(g(h(...args))).

再回头看下applyMiddleware的方法：

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    // 声明一个dispatch
    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)
    }
    // 第一步把middlewares里的函数带着middlewareAPI这个参数都挨个执行，
    //然后保存在chain数组中。也就是middleware中的第一个参数，返回 next => action => {...}
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 在中间件中调用dispatch的时候, 其实就是调用了这个dispatch,而不是一开始声明的逻辑
    // 这个dispatch是已经经过compose的包装的函数
    // const composeRes = compose(...chain);
    // 第二行通过传入store.dispatch,
    // 这个store.dispatch就是最后一个 next => action => {}的next参数
    // 所以中间件其实就是改装dispatch
    // dispatch作为有中间件的store的dispatch属性输出
    //  当用户调用dispatch时, 中间件就会一个一个
    // 执行完逻辑后, 将执行权给下一个, 直到原始的store.dispacth, 最后计算出新的state
    // 问题：compose是如何将中间件串联在一起的?
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

总结下：

1. 第一步把middlewares数组里的函数带着middlewareAPI这个参数都挨个执行个遍且，且保存在chain数组中。也就是middleware中的第一个参数，返回 next => action => {...}
2. 就是上面composeJs 中组合chain中的函数。变成f1(f2(f3(store.dispatch)))，
   并且最终保存在dispatch 变量中。里面的函数最终会返回action => {...}这个函数,
   作为上一个函数的next参数保存在上个函数的scope中，所以每个middleware 中必须执行next(action)才能进入下个middleware。
   而最后一个middleware传入的next正是原始的store.dispatch。