标签：前端 style pos 调用 store log 顺序 证明 中间件
说到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。中间件就是这样的了。
前端越来越往工程化走了，以往在后端的概念，越来越多用之于前端，这证明编程不分前后，工程化，规范化使我们程序更为合理，项目更好维护。
标签：前端 style pos 调用 store log 顺序 证明 中间件
原文地址：http://www.cnblogs.com/jlzt/p/7093153.html
