middleware 的由来
在业务中需要打印每一个 action 信息来调试，又或者希望 dispatch 或 reducer 拥有异步请求的功能。面对这些场景时，一个个修改 dispatch 或 reducer 代码有些乏力，我们需要一个可组合的、自由增减的插件机制，Redux 借鉴了 Koa 中 middleware 的思想，利用它我们可以在前端应用中便捷地实现如日志打印、异步请求等功能。
比如在项目中，进行了如下调用后，redux 就集成了 thunk 函数调用以及打印日志的功能。
import thunk from 'redux-thunk'import logger from '../middleware/logger'const enhancer = applyMiddleware(thunk, logger), // 以 redux-thunk、logger 中间件为例介绍中间件的使用const store = createStore(rootReducer, enhancer)
下面追本溯源，来分析下源码。
applyMiddleware 调用入口
export default function createStore(reducer, preloadedState, enhancer) { // 通过下面代码可以发现，如果 createStore 传入 2 个参数，第二个参数相当于就是 enhancer if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') { enhancer = preloadedState preloadedState = undefined } if (typeof enhancer !== 'undefined') { return enhancer(createStore)(reducer, preloadedState) } ...}
由上述 createStore 源码发现，applyMiddleware 会进行 applyMiddleware(thunk, logger)(createStore)(reducer, preloadedState)的调用。
export default function applyMiddleware(...middlewares) { return createStore => (...args) => { const store = createStore(...args)
