如果我们想要更强大的功能怎么办？如果我们想要打印状态变化前后的日志？或者说想自定义某类方法来作为dispatch的参数？我们当然可以重写原来的dispatch方法，然而这并不优雅，维护成本相对较高。这篇文章想详细讲解一下，在函数式编程的背景下如何以中间件的方式优雅地扩展我们的dispatch方法。

1. 中间件

中间件这个概念存在于许多流行的Web框架中，可以把它想象成是请求/响应分发的中间层，用于对请求/响应做进一步的处理，而无需改变原有的代码逻辑。在node.js社区的KOA轻量级框架很出色地体现了这一点(当然它肯定不是第一个这样干的人)。koa本身只提供了最基础的请求/响应功能，如果想要更强大的功能(比如说日志，时间记录等功能)则需要自己添加相应的中间件。

Redux继承了这一理念，它把中间件应用到了dispatch方法的扩展中，让我们可以优雅地扩展dispatch方法，而不需要重写原有的dispatch方法，接下来我们好好体会一下它的精妙之处。

2. 中间件在Redux中的应用

在分析源码之前先来看看在Redux里面如何使用中间件，最关键的是applyMiddleware这个方法

....
let enhancer = applyMiddleware(
  logger,
  thunk
)

let store = createStore(reducer, enhancer)

let originDispatch = (...args) => {
  console.log(...args)
}

const middleware1 = (dispatch) => {
  return (...args) => {
    console.log('middleware1 before dispatch')
    dispatch(...args)
    console.log('middleware1 after dispatch')
  }
}

const middleware2 = (dispatch) => {
  return (...args) => {
    console.log('middleware2 before dispatch')
    dispatch(...args)
    console.log('middleware2 before dispatch')
  }
}

originDispatch = middleware2(middleware1(originDispatch))
originDispatch('ruby', 'cool', 'language')

export default function compose(...funcs) {
  ...
  // 以上都是判断

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

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
    const chain = middlewares.map(middleware => middleware(middlewareAPI))

    // #2 返回的函数用于处理dispatch函数
    dispatch = compose(...chain)(store.dispatch)

    // #3 替换dispatch
    return {
      ...store,
      dispatch
    }
  }
}

(dispatch) => {
  return function(...args) {
    // do something before
    dispatch(...args)
    // do something after
  }
}

const Logger = (store) => (dispatch) => {
  return function(...args) {
    const wrappedDispatch = store.dispatch
    const getState = store.getState

    console.log('before dispatch', getState())
    dispatch(...args)
    console.log('after dispatch', getState())

    console.info(dispatch)
    console.info(wrappedDispatch)
  }
}

let enhancer = applyMiddleware(
  Logger, // 我们自己编写的Logger
  thunk
)