1. 首页
  2. IT资讯

Redux applyMiddleware 原理剖析

最近在总结最近用的知识,好记性不如烂笔头,所以写出来记录下。

“It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.”
这是 Dan Abramov 对 middleware 的描述。它提供了一个分类处理 action 的机会。在 middleware 中,你可以检阅每一个流过的 action,挑选出特定类型的 action 进行相应操作,给你 一次改变 action 的机会。

Redux applyMiddleware 原理剖析
应用 middleware 后 Redux 处理事件的逻辑

我们还是从实际出发,再来看下内部构造:

Redux applyMiddleware 原理剖析
打印日志中间件
Redux applyMiddleware 原理剖析
白名单中间件
Redux applyMiddleware 原理剖析

applyMiddleware中间件的源码非常精炼,大约只有20多行。

export default function applyMiddleware(...middlewares) {   return (createStore) => (reducer, preloadedState, enhancer) => {     var store = createStore(reducer, preloadedState, enhancer)     var dispatch = store.dispatch     var chain = []      var middlewareAPI = {       getState: store.getState,       dispatch: (action) => dispatch(action)     }     chain = middlewares.map(middleware => middleware(middlewareAPI))     dispatch = compose(...chain)(store.dispatch)      return {       ...store,       dispatch     }   } } 

看懂这段代码,需要提前了解函数式编程compose以及pipe思想,其实就是一个传参数据流,一个从右到左一个从左到右。我们带着问题去看这段代码,为什么我们平时写的时候要传入(store) => (next) => (action)这三个参数?

代码前几行创建了store,createStore后面三个参数是Redux原生createStore方法的标准参数。下面的middlewareAPI其实就是一个精简的store,并且提供了getState和dispach方法。

接下来来看compose,compose顾英文名思中国义即组合函数,将多个函数组合起来串联执行,一个函数的输出作为另一个函数的输入,一旦第一个函数开始执行,过程就会像多米诺骨牌。

let result = compose(f1, f2, f3, f4)(value); ====> let result = f1(f2(f3(f4(value))));

 chain = middlewares.map(middleware => middleware(middlewareAPI))  dispatch = compose(...chain)(store.dispatch) 

dispatch = compose(…chain)(store.dispatch)

可以变化为:

fnMiddle = fn(middlewareAPI);

dispatch = fnMiddle(store.dispatch)

最后等价于:

dispatch = fn(middlewareAPI)(store.dispatch)

接着:
store.dispatch(action)
等价于
fn(middlewareAPI)(store.dispatch)(action) == 对应middleware的三个参数store, next, action。

dispatch = compose(…chain)(store.dispatch) === dispatch= fn1Middle(fn2Middle(store.dispatch))

// fn1Middle = fn1(middlewareAPI)

首先执行的是fn2Middle(store.dispatch),返回结果是如下的一个函数。紧接着fn1Middle( (action) => {} ),这个action函数相当于占据了fn1中next参数的位置。在收到action参数之前呢函数并不会执行。

// fn2Middle(store.dispatch)执行后 (action) => {     ....     next(action)     .... } 
Redux applyMiddleware 原理剖析

原文始发于:Redux applyMiddleware 原理剖析

主题测试文章,只做测试使用。发布者:酒颂,转转请注明出处:http://www.cxybcw.com/24279.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code