如果你是个前端开发者，你一定知道 Redux 是一个可预测、可维护的状态管理工具。但是，当你需要处理的复杂场景变得越来越多时，Redux 可能会对异步操作的处理带来一些困难。
在这篇教程中，我们将介绍一个 npm 包，它能够帮助你更好地处理 Redux 异步操作的场景，它就是 redux-sequential-async-actions。
简介
redux-sequential-async-actions 是一个为 Redux 设计的 npm 包，旨在处理异步操作过程中的 action creators 的串行调用问题。它提供了一个简单的 API 用于生成与传递有序的异步操作。
安装
安装 redux-sequential-async-actions 很简单。打开终端并运行以下命令：
npm install redux-sequential-async-actions
或者，如果你使用 yarn：
yarn add redux-sequential-async-actions
如何使用
在 Redux 中，每个异步操作通常由三个 action creator 组成：一个开始 action、一个成功 action 和一个失败 action。举个例子，在一个博客应用中，这些 action creator 可以形如这样：
-- -------------------- ---- -------
-------- ------------------- -
------ -
----- ---------------------
-
-
-------- ------------------------ -
------ -
----- ----------------------
-------- -----
-
-
-------- ------------------------ -
------ -
----- ----------------------
-------- ------
------ ----
-
-使用 redux-sequential-async-actions 可以优化这些 action creator 的调用方式。
首先，我们需要创建一个 action generator：
import { createSequentialAsyncAction } from 'redux-sequential-async-actions'
export const fetchPosts = createSequentialAsyncAction('FETCH_POSTS')该函数接收一个字符串参数“FETCH_POSTS”，代表你要创建的 action 的名称。
接下来，我们需要使用使用这个 generator 来创建异步 action 的函数：
-- -------------------- ---- -------
------ - ---------- - ---- -----------
-------- ----------------- -
------ ---------- --------- -- -
------------------------------
------ -------------------
-------------- -- ----------------
---------- -- -
----------------------------------
------ ----
--
------------ -- -
-----------------------------------
----- -----
--
-
-我们再来解释一下上面的代码。fetchPostsAsync 函数返回了一个 thunk，它使用 fetch 方法从服务器上拉取博客文章列表。在这个 thunk 中，我们首先通过 dispatch 方法发布了一个 fetchPosts.request() action，表示请求开始。然后，我们发送网络请求，获取数据成功后，我们发布了 fetchPosts.success(data) action，表示请求已成功。如果请求失败，我们发布 fetchPosts.failure(error) action，表示请求已失败。这些 action 的数据，以及关于是否发生了错误的信息，都将被捕获和记录。
到此为止，我们已经完成了异步 action creator 的所有部分。现在，我们只需要在组件的生命周期方法中调用上述异步 action creator 以进行数据获取，就像这样：
-- -------------------- ---- -------
----- --------- ------- --------------- -
------------------- -
----------------------------
-
-------- -
----- - ------ ------ --------- - - ----------
-- ------- -
------ --------------------------
-
-- ----------- -
------ ---------------------
-
------ -
----
--------------- -- -
--- -------------------------------
---
-----
-
-
-
----- --------------- - ----- -- --
------ ------------------
---------- ----------------------
------ -----------------
--
----- ------------------ - - --------------- -
------ ------- --------
----------------
------------------
------------在上面的代码中，我们在 componentDidMount 生命周期函数中调用了 fetchPostsAsync 函数，来执行我们的网络请求。然后，我们通过 mapStateToProps 函数将获取的数据映射到组件的 props 中，以便在渲染组件时使用。
总结
redux-sequential-async-actions 使我们能够更轻松、更高效地处理 Redux 异步操作的场景。我们只需要少量代码就可以处理三重 action 的生成和调用，从而帮助我们更好地管理和维护代码库。如果你曾感到 Redux 中的异步操作问题令你感到困惑，并且想要简化代码，那么这个库可能是值得一试的好东西。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b081e8991b448deefb