Redux 是一个用于 JavaScript 应用程序的预测性状态容器。它可以帮助您编写易于维护、易于测试的应用程序。但是，当您的应用程序变得越来越复杂时，Redux 没有提供一种简单的方法来处理副作用。副作用可能是异步的，如请求后端 Api，也可能是需要用户交互的，如警报/确认框。Redux-Chains 是一个 npm 包，提供了一个简单的方法来处理异步和需要用户交互的副作用。
在本文中，我们将学习如何使用 Redux-Chains 并提供示例代码。
安装
在使用前，您需要先安装 Redux 和 Redux-Chains 包：
npm install redux redux-chains --save
配置
接下来，我们将在 Redux 初始配置文件中设置 Redux-Chains：
-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
------ ----- ---- --------------
------ ----------------- ---- ---------------
----- ------------ - ---
-- -------
-------- ---------------- - ------------- ------- -
------ ------------- -
---- -----------
------ - --------- ----- -------------- --
--------
------ ------
-
-
----- - ----------------- --------------- - - ------------------------------
----- ----- - ---------------------------- ---------------------- -------------------
------ ------- ------我们使用了 applyMiddleware 函数来注册了 Redux-Chains 中间件（chainsMiddleware）。Redux-Chains 的功能可以通过在 Action 对象中使用 .next() 和 .waitFor() 函数来实现。Redux-Chains 监听这些函数并在下一个 Action 中执行其他内容。
使用
.next() 函数
.next() 使您能够指定副作用，并将其添加到当前 Action 的下一个 Action 中。我们来看一个 addEmployeeAction。它使用 .next() 函数告诉 Redux-Chains，在成功添加员工后要做些什么：
-- -------------------- ---- -------
-------- -------------------------- -
------ -
----- ---------------
---- -
------- -------
--------- ------------
----- - ----- ------- -
-
-------- ----- ----------------- ---
-在这个例子中，我们使用 .next() 函数添加了另一个 Action 对象，FETCH_EMPLOYEES，当添加成功时之后我们会去获取新的员工数据列表。
.waitFor() 函数
.waitFor() 也让您能够指定副作用依赖关系，并允许您在依赖项完成后执行 Action。让我们看看如何获取员工列表并在之后更新员工列表：
-- -------------------- ---- -------
-------- ---------------------- -
------ -
----- ------------------
---- -
------- ------
--------- ------------
-
----------- ----- ---------------------- ----------------- -- --
----- ----------------
-------
----
-在这个例子中，我们使用 .waitFor() 函数依赖于 ADD_EMPLOYEE_SUCCESS Action，并在它完成后使用 .next() 函数执行 SET_EMPLOYEES Action. 该 payload 实参是 addEmployeeAction 的返回结果。
整体使用示例
完整的示例代码如下：
-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
------ ----- ---- --------------
------ ----------------- ---- ---------------
----- ------------ - -
---------- --
--
-- -------
-------- ---------------- - ------------- ------- -
------ ------------- -
---- -----------------------
------ - --------- ---------- -------------------- --------------- --
---- ----------------
------ - --------- ---------- -------------- --
--------
------ ------
-
-
----- - ----------------- --------------- - - ------------------------------
----- ----- - ---------------------------- ---------------------- -------------------
-------- -------------------------- -
------ -
----- ---------------
---- -
------- -------
--------- ------------
----- - ----- ------- -
-
-------- ----- ----------------- ---
-
-------- ---------------------- -
------ -
----- ------------------
---- -
------- ------
--------- ------------
-
----------- ----- ---------------------- ----------------- -- --
----- ----------------
-------
----
-
------------------------------------------- -- ---- -----
--------------------------------------- -- ------在这个例子中，当您调用 addEmployeeAction 函数时，Redux-Chains 会发起 POST 请求并将该调用包装在 ADD_EMPLOYEE Action 对象中，并添加一个 FETCH_EMPLOYEES Action 对象到队列中，以便在完成后更新员工列表。
结论
Redux-Chains 是一个非常有用的 npm 包，帮助开发者更轻松地处理 Redux 应用程序中的异步和副作用。这个包的简单性和灵活性使它成为每个 Redux 应用程序必须的工具之一。在本文中，我们学习了如何使用这个包来处理异步操作，并展示了它如何集成到 Redux store 中。希望这篇文章对您的前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de24b