如果你是一个前端开发者，肯定知道 Redux 这个状态管理库是很重要的一个工具。在使用 Redux 过程中， dispatch 异步 action 是一个很常见的需求。但是 Redux 默认并不支持异步 action，这时候就需要通过 redux-thunk 或者 redux-saga 等中间件去支持异步 action。不过使用这些中间件还需要写很多繁琐的代码，为了解决这个问题，本文介绍一款 npm 包：redux-minimal-code-async-actions，让 Redux 支持异步 action 的过程更加简单。
安装
首先，我们需要安装 redux-minimal-code-async-actions 包。通过 npm 命令行可以很容易安装：
--- ------- ------ --------------------------------
使用
在使用 redux-minimal-code-async-actions 的过程中，我们需要定义三种类型的 action：
- Request（请求）：用于触发异步请求的 action。
- Received（接收成功）：用于接收请求成功返回数据的 action。
- Error（错误）：用于接收请求失败返回的 action。
Request 类型 action
在 Redux 中 dispatch 一个 Request 类型的 action 大概是这样的：
---------- ----- -------------------- ---
使用 redux-minimal-code-async-actions 包后，会自动帮我们生成一个 Request 类型的 action，无需手动编写。代码如下：
------ ------------------ ---- ----------------------------------- ------ ----- --------- - -------------------------------- ---------------------------
这里的 asyncActionCreator 函数生成的对象包括 Request、Received 和 Error 类型的 action。
Received 类型 action
Received 类型的 action 用于保存请求成功后的结果数据，而且需要手动定义 payload（负载）属性。代码如下：
---------- ----- ---------------------- -------- ----- ---
使用 redux-minimal-code-async-actions 后，我们不再需要手动定义 payload 属性。Received 类型的 action 会自动创建，代码如下：
------ ------------------ ---- ----------------------------------- ------ ----- --------- - -------------------------------- --------------------------- ----- -------- ------------------- - ----- ---- - ----- ---------------------------------- ----------------- -- ------- ---- -- ------ -
这里 fetchData.dispatchAsync(dispatch) 返回一个 Promise 对象，可以用来获取异步请求的结果数据。
Error 类型 action
Error 类型的 action 用于保存请求失败后的错误信息，手动编写的代码如下：
---------- ----- ------------------- -------- ----- ---
使用 redux-minimal-code-async-actions 包后，Error 类型的 action 也不再需要手动编写。代码如下：
------ ------------------ ---- -----------------------------------
------ ----- --------- - -------------------------------- ---------------------------
----- -------- ------------------- -
--- -
----- ----------------------------------
- ----- --- -
-------------- -- ----- ---- -- ------
-
-这里 fetchData.dispatchAsync(dispatch) 通过 catch 捕获错误，如果发生错误则会进入 catch 代码块。
示例代码
下面是一个基于 redux-minimal-code-async-actions 包的使用示例代码：
------ ------------------ ---- -----------------------------------
-- ---- ----- ---- ------
------ ----- --------- - -------------------------------- ---------------------------
-- ---- ----------------- --
----- -------- ------------------- -
--- -
----- ---- - ----- ----------------------------------
----------------- -- ------- ---- -- ------
- ----- --- -
-------------- -- ----- ---- -- ------
-
-总结
redux-minimal-code-async-actions 包让 Redux 支持异步 action 的实现更加简单，可以大大减少我们编写冗余代码的量。在使用 redux-minimal-code-async-actions 包时，我们需要按照固定的格式定义 Request、Received 和 Error 类型的 action，并使用 asyncActionCreator 函数生成异步 action 类型的对象。如果你正在使用 Redux 并且需要支持异步 action，不妨尝试一下 redux-minimal-code-async-actions 包，它将帮助你减少代码量并提高工作效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600572d581e8991b448e90b9