如果你已经熟悉了 Redux 的基本用法，那么你可能会遇到一些复杂的场景，例如异步请求和根据不同情况发起不同的 action。Redux-Loop 是一个用于管理 Redux 状态机的库，它能够很好地解决这些场景。
本文将介绍 npm 包 @thewillhuang/redux-loop 的使用方法。下面将对其进行详细解释并提供一些示例代码。
安装
使用 npm 安装 @thewillhuang/redux-loop：
npm install @thewillhuang/redux-loop
基本原理
Redux-Loop 的核心是 middleware，它可以劫持 action，并让它返回一个 Cmd 对象和一个新的 action。Cmd 对象用于外部异步请求，新的 action 用于状态更新。
一个 Cmd 对象包含一个 type 和一个 payload，其中 type 表示要执行的命令类型，如 HTTP_REQUEST 或 DELAY，payload 是传递给命令执行函数的参数，比如 URL 或延迟时间。
在中间件中，当我们可以使用 isCmd 函数判断一个 action 是否返回了一个 Cmd 对象。如果是，执行 Cmd 对象指定的命令，命令执行完成后再返回一个新的 action。
示例代码
下面是一个基本的示例，它展示了如何使用 Redux-Loop 处理简单的异步请求：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------- - ---- ---------------------------
------ - ----- --- - ---- ---------------------------
----- ------------ - -
----- ---
--
----- ---------- - -------------
----- ------------- - ----------------
-------- ----------- -
------ - ----- ---------- --
-
-------- ------------------ -
------ - ----- -------------- -------- ---- --
-
-------- ---------- -
------ ----------
--------- -- -
-- -------- -
------ -----------
-
----- --- ----------------------
---
-
-------- ------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -----
- --------- ----- ------------ --
-------------- -
--------------------- -------------
----- ---------------------------------
--
--
---- --------------
------ - --------- ----- -------------- --
--------
------ ------
-
-
----- -------- - ---------------------------
----- ----- - -------------------- --- ----------
----------------------------上面的代码包含了 loop 和 Cmd.run 两个核心函数。loop 用于创建一个循环，它接收两个参数：一个状态对象和一个命令对象。Cmd.run 用于创建一个命令对象，它接收两个参数：一个命令函数和一个配置对象，配置对象包括 args（命令函数的参数）和 successActionCreator（成功时要分派的 action 创建函数）。
上面的代码中，当 FETCH_DATA action 进入 reducer 时，我们使用 Cmd.run 向外发送一个异步请求，请求成功后分发 FETCH_SUCCESS action 更新状态。
深入使用
除了 Cmd.run，Redux-Loop 还提供了一些其他的命令类型，包括 Cmd.action、Cmd.batch、Cmd.none、Cmd.list 和 Cmd.runPromise 等。下面是一些使用示例。
发送多个请求
如果你需要发送多个请求，你可以使用 Cmd.list 命令来同时执行多个命令。下面是一个示例代码：
-- -------------------- ---- -------
-------- ----------------- -
------ -------------------------------------------
--------- -- ------------
-
-------- ---------------------- -
------ -----------------------------------------------------
--------- -- ------------
-
-------- ----------------------- -
------ ------------------------------------------------------
--------- -- ------------
-
-------- ------------------------ -
------ ----------
---------------------- -
--------------------- ---------------------
----- ---------
---
----------------------- -
--------------------- ----------------------
----- ---------
---
------------------------ -
--------------------- -----------------------
----- ---------
---
---
-
-------- ------------- - ------------- ------- -
------ ------------- -
---- --------------------
------ -----
------
---------------------------------------
--
---- ------------------------
------ - --------- --------- -------------- --
---- -------------------------
------ - --------- ---------- -------------- --
---- --------------------------
------ - --------- ----------- -------------- --
--------
------ ------
-
-上面的示例中，我们使用 Cmd.list 将三个请求命令打包成一个命令列表依次执行，用 successActionCreator 指定分发成功时的 action。
条件执行命令
有时候，当我们在分发 action 时，需要根据不同的情况执行不同的命令。下面是一个示例代码：
-- -------------------- ---- -------
-------- ----------------- -
-- -------- -
------ ---------------------- -
----- ---------
--------------------- -----------------
---
- ---- -
------ ---------------------- -
--------------------- ---------------------
---
-
-
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -----
------
--------------------------------
--
---- -------------------
------ - --------- ----- -------------- --
---- ------------------------
------ - --------- --------- -------------- --
--------
------ ------
-
-上面的示例中，我们使用了 if...else 判断条件，根据不同的参数分别执行不同的命令。
命令批处理
有时候我们需要在 applyCreate action 时切换所有的 Todo 状态，那么我们可以通过使用 Cmd.run 命令创建一个 updateTodoState 函数，然后在 todoList action被 applyCreate 处理时，将所有 Todo 集合在一起，使用 Cmd.batch 执行一起处理，下面是示例代码：
-- -------------------- ---- -------
-------- ---------------------- ----- -
------ -------------- --
-- -------- ---- --
--
-
-------- -------------- ------- -
------ ------------- -
---- ---------------
----- ----- - ---------------------
----- -------- - ---------------------- ------
------ -
------------
------------------
--
---- --------------
----- ----- - ----- ----------------
------ ------
--------
------ ------
-
-
----- ----- - ------------
--------
---------
--------- ------- ----总结
使用 Redux-Loop 可以高效地管理 Redux 状态机，它可以更好地处理异步请求和处理流程，并提供了一些有效的工具来管理，目前它成为了大量 React 项目中首选的状态管理库，你应该尝试使用它来提高你的代码复用率、可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b1381e8991b448d8bdb