前言
Redux 是一个非常流行的 JavaScript 状态管理库, 它的简洁可靠以及优秀的开发体验使得它成为了 React 生态体系中最受欢迎的一部分之一。虽然 Redux 优秀，但有时也会比较繁琐，需要写很多重复的代码。为此，简化 Redux 常用场景的 "redux-slim" 库被诞生，但该库在异步请求方面支持不足。本文介绍的 "redux-slim-async" 库，是以 "redux-slim" 为基础，专门增强异步请求的功能。该库的输入输出与 Redux 保持一致，但底层代码已经帮你做好了异步请求等重复的操作，适合那些追求简化开发人员的工作量的场景。
安装
npm install --save redux-slim-async
提供的API
- wrapAction：将没有异步操作的 action 包装成带请求状态的 action。
- asyncDispatch：发送异步请求并返回带请求状态的 action。
- asyncConnect：将一个 react 组件和一个或多个 redux 数据源的嵌套包装在一起，以确保通过异步请求准确渲染组件。
使用示例
以下示例假设读者已经了解了 Redux 的使用，使用 React 编写组件并且熟悉使用 connect 函数将组件与 Redux 关联起来。
wrapAction
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
------ - ----- - ---- ------ -- ----- ----- ----------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- ----- - ---------- --------- -- -
------ ------------
------ --------------- -------------- ---------------
-------- - --------- -------- --
-------- --------------- --------- -- --------------------
---
--我们传入 TYPES 数组用于指定需由 redux-slim-async 生成的 3 个 action（REQUEST、SUCCESS、FAILURE），以及 promise 方法，此方法会在异步操作成功后返回的结果并且由 redux-slim-async 代码帮助我们自动执行该方法。
asyncDispatch
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
------ - ---------- - ---- ------ -- ----- ---------- --------
----- -------------- - ---------- ------ -- -
------ ----- -------- -- -
----- ------ - ----- -----------------------
-
----- ----------------- -- -----------
-------- - --------- ----- --
-------- -------------------- ------
-
---
------ ------- -- ------------------------
--
--我们可以使用 asyncDispatch 生成带有请求状态的 action，用于处理异步请求的状态变化情况。
asyncConnect
-- -------------------- ---- -------
------ - ------------ - ---- -------------------
------ - ---------- ------------------ - ---- ------
------ - ---- - ---- ------------------
------ - ------------- - ---- ---------------------------
----- -------------- - ---------------
-------- ---------- -- -----------
-------- -------------
-- -
-------- ------------------- -- -----------
-------- ------------------
------ -- -
------ -
-----
----- --
-------------- --
------
--
---使用编写异步操作是很常见的，在我们依赖其结果将数据传递给 react 组件之前执行异步操作。asyncConnect 可以帮助我们处理这个问题，它提供了原生 react-redux 的 connect 函数，但是当我们组件创建完成后，它也会将请求结果附加到属性上。
他的 API 中定义了一个 Promise 操作数组（promise），其中包含每一个操作所需的promise操作，这里我们可以发起1个或多个远程 API 和/或在 redux 中调派（dispatch）操作。通常情况下，我们需要引入操作作为 React prop，以便我们可以更改其状态。例如，我们可以分别将 getNotifications 和 getUserInfo 操作设置为相应的回调 prop。
-- -------------------- ---- -------
------ - ------------ - ---- -------------------
------ - ---------- ------------------ - ---- ------
------ - ---- - ---- ------------------
------ - ------------- - ---- ---------------------------
----- --------------- - ----- -- -
------ -
--------- ---------------
-------------- -------------------
--
--
----- -------------- - ------------------------ - ------------ ---------------- ------------------
-------- ----------
-------- -------------
-- -
-------- -------------------
-------- ------------------
------ -- -
------ -
-----
----- --
-------------- --
------
--
----结论
通过 "redux-slim-async" 库，我们可以快速简单地进行异步请求处理，省去了繁琐的请求处理流程，让您更加关心业务逻辑。本文已经介绍了该库的基础使用方法及相关API，但该库还有很多其他用法，读者可以自行前往官网查看相关API的文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e60