如果我们想要更强大的功能怎么办？如果我们想要打印状态变化前后的日志？或者说想自定义某类方法来作为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 )