Redux中间件随笔

Posted 2020-09-25

    说到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。中间件就是这样的了。

    前端越来越往工程化走了，以往在后端的概念，越来越多用之于前端，这证明编程不分前后，工程化，规范化使我们程序更为合理，项目更好维护。