前言
我们已经解析了Redux 的createStore 的基本使用方法。其中有涉及到第三个参数enhancer， 其对应的就是中间件的概率，我们这一章节我对其进行简单的分析.
Demo
下面代码是一个我们使用了中间件的一个简单的 我可以根据下面的步骤执行脚本，可以运行demo 查看效果:
1
git clone git@github.com:bluebrid/redux-learning.git
2
git fetch
3
git checkout middleware
4
npm i
5
npm start
下面是创建一个有中间件的Store 的demo:
import { createStore, applyMiddleware, compose } from '../redux'import thunk from '../reduxThunk'import { createLogger } from 'redux-logger'import api from '../middleware/api'import rootReducer from '../reducers'import DevTools from '../containers/DevTools'const configureStore = preloadedState => { const store = createStore( rootReducer, preloadedState, compose( applyMiddleware(thunk, api, createLogger()), DevTools.instrument() ) ) if (module.hot) { module.hot.accept('../reducers', () => { store.replaceReducer(rootReducer) }) } return store}export default configureStore复制代码 下面我们会针对这个代码，进行一步步深入的分析。
compose
从第一章节，我们已经知道第三个参数是一个enhancer ,其实也就是一个中间件的概念，但是为我们从上面的脚本看到，第三个参数居然是执行了一个compose 的方法， 我接下来就分析下这个compose 方法，:
export default function compose(...funcs) { if (funcs.length === 0) { return arg => arg } if (funcs.length === 1) { return funcs[0] } return funcs.reduce((a, b) => (...args) => a(b(...args)))}复制代码 如果传入的中间件的个数为：0，返回一个空函数，则相当于什么也不操作， 如果传入的参数长度为： 1， 则直接返回这个函数， 下面才是重点，return funcs.reduce((a, b) => (...args) => a(b(...args)))
TODO.....