说到Redux中间件，我见到的他的应用，在一个高星项目中，是做数据的异步获取，后端接口调用的角色。我甚感此种方式的精明之处。在此写个文章，任诸君品鉴，若有不到之处，不吝赐教。
1.什么是中间件？既然叫了中间件，就有中间件的共性。Express中中间件，就是一个拦截的作用，每次的request，都会被所截获，然后做你想要做的目的。如果你想放行，就next();继续下个中间件。同理Redux中，request=>action,request变成了action。其他就是一样的。每个触发action都会被中间件所截获。根据你的需求在中间件里面做你想做的事。
2.如何实现这个截获？Redux中每个action，需要被dispatch，才能进入reducer里面去改变store里面的状态集。这意味着dispatch是入口点，你想实现这个截获就是改写dispatch。让dispach先执行一个一个的中间件，最后在触发这个action。
3.applyMiddleware是Redux提供的方法，他的作用就是实现上面所言改写dispatch，让他可以先执行中间件然后在触发action。
1 export default function applyMiddleware(...middlewares) {
2
3 return (createStore) => (reducer, initialState, enhancer) => {
4
5 var store = createStore(reducer, initialState, enhancer)
6 var dispatch = store.dispatch
7 var chain = []
8
9 var middlewareAPI = {
10 getState: store.getState,
11 dispatch: (action) => dispatch(action)
12 }
13
14 chain = middlewares.map(middleware => middleware(middlewareAPI))
15
16 dispatch = compose(...chain)(store.dispatch)
17
18 return {
19 ...store,
20 dispatch
21 }
22 }
23 }
中间件有固定的写法如下：
1 function middleware({dispatch, getState}) {
2 return function(next) {
3 return function(action) {
4 next(ation);
5 }
6 }
7 }
第一步则把函数的第一层拆掉了，剩下的部分存入chain数组中。
第二步的compose就是改写dispatch函数了，compose源码如下。
export default function compose(...funcs) {
return (...args) => {
if (funcs.length === 0) {
return args[0]
}
const last = funcs[funcs.length - 1]
const rest = funcs.slice(0, -1)
return rest.reduceRight((composed, f) => f(composed), last(...args))
}
}
精华部分来临了，最后一个中间件的next为store.dispatch,然后的action=>{}这个函数将作为下一个next的参数,这样的话造成层层嵌套，dispatch函数就变成了按照中间的定义顺序执行了。最后当然返回一个action=>{}这样的函数。但是由于闭包的关系，这个返回的函数是一个可以想象为层层嵌套的结构。这个部分当然很有技巧，先反而后正，按照中间件的定义顺序执行，这个很有技巧的。
达成我们的目标dispath被改写，先执行中间件然后在触发action。中间件就是这样的了。
前端越来越往工程化走了，以往在后端的概念，越来越多用之于前端，这证明编程不分前后，工程化，规范化使我们程序更为合理，项目更好维护。