Redux中间件对闭包的一个巧妙使用

最近在看Redux的源码,发现Redux在使用中间件applyMiddleware.js的源码中,有一个对闭包非常巧妙的使用,解决了“鸡生蛋,蛋生鸡”的问题,特分享给大家。

Redux中间件的函数签名形式如下:

applyMiddleware.js中的函数applyMiddleware(...middlewares)用于根据中间件生成action经过的中间件链。先来看一个错误版本的实现:

核心逻辑是 和 这两行。第1句代码是根据中间件生成一个数组chain,chain的元素是签名为 形式的函数,每个元素就是最终中间件链上的一环。第2句代码利用compose函数,将chain中的函数元素组成一个“洋葱式”的大函数,chain的每个函数元素相当于一层洋葱表皮。Redux发送的每一个action都会由外到内依次经过每一层函数的处理。假设有3层函数,从外到内依次是a,b,c,函数的实际调用过程是,a接收到action,在a函数体内会调用b(a的参数next,指向的就是b),并把action传递给b,然后b调用c(b的参数next指向的就是c),同时也把action传递给c,c的参数next指向的是原始的 ,因此是action dispatch的最后一环。这样分析下来,程序是没有问题的,但当我们的中间件需要直接使用dispatch函数时,问题就出来了。例如,常用于发送异步action的中间件redux-thunk,就需要在异步action中使用dispatch:

fetchPosts使用的dispatch,是redux-thunk传递过来的,指向的是middlewareAPI对象中的dispatch,实际等于store.dispatch。当执行 时,这个action直接就到了最后一环节的处理,跳过了redux-thunk中间件之后的其他中间件的处理,显然是不合适的。我们希望的方式是,这个action依然会从最外层的中间件开始,由外到内经过每一层中间件的处理。所以,这里使用的dispatch函数不能等于store.dispatch,应该等于 ,只有这样,发送的action才能经过每一层中间件的处理。现在问题出来了, 需要使用 返回的dispatch函数,而 的执行又依赖于 的执行结果,我们进入死循环了。

问题的解决方案就是闭包。当我们定义middlewareAPI的dispatch时,不直接把它指向store.dispatch,而是定义一个新的函数,在函数中引用外部的一个局部变量dispatch,这样就形成了一个闭包,外部dispatch变量的变化会同步反映到内部函数中。如下所示:

这样,“鸡生蛋,蛋生鸡”的问题就解决了。如果这个例子对你来说太复杂,可以用下面这个简化的例子帮助你理解:

第二种方式,middleware中dispatch的number会再次经历中间件的处理,当number=3,2,1,0时,都会进入一次middleware函数,当number=0时,next(0)调用的是test中定义的初始dispatch函数,因此不再经过middleware的处理。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180428G1GA8V00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券