专栏首页WebJ2EEReact:Redux怎么处理异步?

React:Redux怎么处理异步?

Redux是个状态管理容器,核心接口就这几个:

createStore(reducer, preloadedState, enhancer); store.subscribe(listener); // 订阅State的变化; store.dispatch(action); // 分发Action store.getState(); // 获取State;

我们只能通过dispatch(action)来触发状态变化:

store.dispatch(action); // 分发Action

dispatch(action)则通过reducer完成状态修改:

currentState = currentReducer(currentState, action)

附:redux的dispatch源码

至此,我们可以看出

Reducer 必须是同步函数

不能放置异步逻辑

(注:Redux要求Reducer必须是“纯函数”!)


那么,问题来了...

Redux应该在哪处理异步逻辑?

异步逻辑应放置在

Redux中间件中处理

!! Middleware !!

(就是下面要提到的redux-thunk、redux-promise)

Redux中间件实质是

store.dispatch函数的增强器

它们拦截特定的Action

并在其中把带有副作用的工作完成

(例如:异步...)

1. 有哪些异步处理中间件?

redux-thunk:不到10行代码,精简到炸! redux-promise:基于Promise的异步处理; redux-promise-middleware:还是Promise; redux-saga:最优雅!最复杂!

下面,通过代码示例

直观展示这4款中间件的差异

2. redux-thunk

redux:

store.dispatch({type: "INC", payload:....}); 注:redux 的 action 是一个简单 JS 对象;

redux-thunk:

store.dispatch((dispatch, getState) => { ... }) 注:redux-thunk 允许我们 dispatch 一个 thunk函数;

redux-thunk 中间件允许你 dispatch 一个函数(即:thunk),异步逻辑就放在这个函数中处理;

感受一波redux-thunk的精炼

redux-thunk应用示例

总结:

redux-thunk 允许我们 dispatch 一个包含异步处理逻辑函数(thunk);优点是我们可以借助这种简单的机制在 redux 中处理异步逻辑;缺点是这会让 action 变的不纯粹,也会使得业务逻辑很分散;

扫码查看示例源码

2. redux-promise

redux:

store.dispatch({type: "INC", payload:....});

redux-thunk:

store.dispatch((dispatch, getState) => { ... }) 注:redux-thunk 允许我们 dispatch 一个 thunk函数;

redux-promise:

store.dispatch({type:"INC", payload: Promise}); 注:redux-promise 允许我们 dispatch 一个 payload 为 Promise 的 action;

redux-promise也很精炼

redux-promise应用示例

总结:

redux-promise 虽然比 redux-thunk 封装的更深,但仍然存在几个问题:

a. INC_INPROGRESS 动作不太好安置,不利于我们实现 loading 状态;

b. 业务逻辑实质还是集中在 action 中处理,变更了 action 原本的含义;

扫码查看示例源码

2. redux-promise-middleware

redux:

store.dispatch({type: "INC", payload:....});

redux-thunk:

store.dispatch((dispatch, getState) => { ... }) 注:redux-thunk 允许我们 dispatch 一个 thunk函数;

redux-promise:

store.dispatch({type:"INC", payload: Promise}); 注:redux-promise 允许我们 dispatch 一个 payload 为 Promise 的 action;

redux-promise-middleware:

store.dispatch({type:"INC", payload: Promise}); 注:redux-promise-middleware 与 redux-promise 一样,允许我们 dispatch 一个 payload 为 Promise 的 action;

redux-promise-middleware应用示例

总结:

redux-promise-middleware 与 redux-promise 差不多...不多说了...

扫码查看示例源码

2. redux-saga

redux:

store.dispatch({type: "INC", payload:....});

redux-thunk:

store.dispatch((dispatch, getState) => { ... }) 注:redux-thunk 允许我们 dispatch 一个 thunk函数;

redux-promise:

store.dispatch({type:"INC", payload: Promise}); 注:redux-promise 允许我们 dispatch 一个 payload 为 Promise 的 action;

redux-saga:

store.dispatch({type:"INC", payload:...}); 注:redux-saga 不会变动 action 的本来含义,action 仍然是一个普通的 JS 对象;

redux-saga应用示例

总结:

redux-saga是最优雅的,也是最复杂的异步中间件:

a. 有强大的异步流程控制功能(例:takeEvery、takeLatest);

b. 异步业务逻辑被集中在 Saga 中管理;

c. 没有修改 action 原本的含义;

d. 结合 Generator、Promise 特性,用同步的方式书写异步代码;

扫码查看示例源码

精选文章推荐

本文分享自微信公众号 - WebJ2EE(WebJ2EE)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-07-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React:redux-form 应用示例

    redux-form 提供了一堆 selector,便于我们从state中获取 form 表单的各种状态数据...

    WEBJ2EE
  • 算法:龟兔赛跑

    龟兔赛跑算法(Floyd's cycle detection 或 Tortoise and the hare algorithm)可用于判定链表、迭代函数、有限...

    WEBJ2EE
  • NPM那些库(2):cross-env、fs-extra、svgo、parse5、path

    “NPM那些库” 是系列文章,每篇介绍几个 Node 环境中常用的库,目的是:总结、记录、分享。

    WEBJ2EE
  • Why anchor?

    七期飞跃计划还剩7个名额,联系小编,获取你的专属算法工程师学习计划(联系小编SIGAI_NO1)

    SIGAI学习与实践平台
  • Linux NTP时间服务器

    NTP 时间服务器 ntp也是一种协议 ntp软件(支持ntp协议)  CentOS6自带 CentOS7需要安装 chrony软件(支持ntp协议)   Ce...

    863987322
  • Android全局异常处理

    用户1205080
  • Spark 踩坑记:数据库(Hbase+Mysql)

    在上篇《spark踩坑记—— 初试》文章中,给大家讲述了spark的基本概念和简要操作 ,这篇文章将对spark操作hbase和mysql的内容进行总结,并且对...

    肖力涛
  • 数据结构——树、森林和二叉树的转换

    森林是由若干棵树组成的,所以可以完全理解为,森林中的每一棵树都是兄弟,可以按照兄弟的处理办法来操作。步骤不如:

    蜻蜓队长
  • UCloud上市后的新苦海:净利一路下坡

    IDC发布的报告显示,受疫情影响,云计算技术将从互联网走向非互联网,深刻影响整个社会的生产生活方式,并指出2018年至2022年我国公有云市场复合增长率达 39...

    刘旷
  • Netty 系列一(核心组件和实例).

        早期的 Java API 只支持由本地系统套接字库提供所谓的阻塞函数来支持网络编程。由于是阻塞 I/O ,要管理多个并发客户端,需要为每个新的客户端So...

    JMCui

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动