首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一个插件让你在 Redux 中写 promise 事半功倍

Redux 的应用给我们开发带来了很多便利,让组件间交互不再那么复杂,但 Redux 也有它的短板,我们知道要通过 Redux 改变一个 state 需要定义 actionTypeactionreducer,这使得有时候一个很简单的交互都需要写一堆代码,我们今天要介绍的这个小插件可以让这个工作变得更加简洁、优雅。

它就是:redux-promise-middleware,这是一个 Redux 的 middleware,引入项目的方式和其他的 redux middleware 一样,具体可以查看它的官方文档,这里就不再赘述。

举个典型的例子,通过 Redux 中发起一次登录请求,这个请求的 promise 会有3种状态需要我们处理,分别是 pending、resolve、reject,在 pending 的时候页面要显示等待状态,resolve 的时候要显示请求成功,reject 的时候要提示用户请求失败,我们先通过对比来看一下用了这个组件之后代码是什么样子:

actionType.js

使用前:

使用后:

只需要写一个?是的,让我们往下看。

action.js

使用前:

使用后:

写完了?没错,就是这么简单。那等待和失败的处理在哪里呢?别急,咱们继续往下看。

reducer.js

使用前:

使用后:

正如你所看到的,用了这个 middleware 后,一个带有 promise 的 action 会被包装成三个状态为后缀的 action 发给 reducer,并且此时 action.payload 中的值已经是 promise 执行后返回的结果,然后我们只需要拿 payload 的值分别操作 state 就行了。看到这里你应该觉得,嗯,这个插件确实能让人少写不少代码,但是反应快的朋友看了之后可能又有疑问了——在 action 里面只返回一个 type 和 payload 的对象,这在处理一个请求的时候确实没问题,那假如我在 login 之后紧接着又要 dispatch 另外一个 action 怎么办呢?

这个时候我们可以这样写:

从笔者的使用经历来看,以上的写法基本能满足绝大多数的场景,此时有的同学可能依然有疑问——这个 middleware 这么擅自主张的就对 action 进行了改装,会不会对项目的入侵太大?如果我的项目已经进行到一半,再引入它会不会让我以前写的 action 无法正常被 reducer 接收到?这个答案让我们到它的源码中去寻找:

打开它的仓库地址,我们会发现它的代码很少,只有两个文件: 和 , 定义了一个工具方法用来判断一个对象是否是一个 promise,这里就不再多讲。主要的逻辑在 中,为了节约你的时间,我们用一个流程图去大概描述它的逻辑:

值得一提的是,因为它是一个 Redux 的 middleware, 意味着将 action 传递给下一个 middleware,直到传递到 reducer 中。从图中可以看出,如果你不是按照它规定的格式书写 action,它会直接透传出去,因此它并不会对项目造成什么副作用(除非你以前的 action 中的对象就是有叫 payload 的属性,并通过 payload 直接把一个 promise 对象发给了 reducer,这种本身也是不规范的写法)。

除了文章中讲到的这些,redux-promise-middleware 还有许多其他的使用技巧帮助我们提高编码效率,同时很多属性也支持自定义,比如代表三种状态的 action 的后缀等等,感兴趣的同学可以下来自行阅读官方文档。

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

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券