简介
redux-action-chain 是一个用于管理 Redux 异步操作的第三方 npm 包。它的作用是对 Redux 中的 action 进行链式处理，使得开发者可以轻松地进行连续性操作和管理异步流程。
在本篇文章中，我们将简述 redux-action-chain 的基本概念，并提供一些使用示例，帮助读者更好地理解该npm包的使用方法。
安装
要使用 redux-action-chain，您需要先安装它。通过 npm 安装即可，如下所示：
npm install --save redux-action-chain
基本概念
redux-action-chain 的核心是 reducer，读者需要先熟悉 Redux 中的 reducer。在 Redux 中，reducer 是一个以 action 为参数，返回下一个状态的纯函数。
使用 redux-action-chain，需要在 reducer 上套用一层函数，该函数会自动调用 action 生成函数，并在调用链结束时返回一个新的 reducer。调用链中的每个 action 都是具有前导和后继操作的，可以通过预定义的方法添加每个操作。
以下是几个基本概念，读者需要先理解它们才能正常使用redux-action-chain：
事件 (event)：事件是一个包含 type 和 payload 属性的 JavaScript 对象，作为 Redux 应用程序中的指令，用于在应用程序中描述变化的请求。 type 属性是一个表示事件类型的字符串，payload 属性是一个可选的表示将要应用到应用程序状态的数据。
reducer：纯函数，必须是同步的（不能有异步操作），它接收当前状态和一个事件作为参数，并且返回应用程序的新状态。
action：普通函数，用于创建事件并传递给 reducer。 action 函数可以返回一个事件或返回一个函数，后者将接收 dispatch 和 getState 函数作为参数。
使用示例
下面，我们将提供一些使用示例，以便读者更好地理解 redux-action-chain。
示例一：
下面是一个简单的 Redux 应用程序，它只是对计数器进行了加和减的操作。代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - -------------- --
---- ------------
------ - ------ ----------- - -------------- --
--------
------ ------
-
-
----- ----- - ---------------------
------------------ -- -
------------------------------------
---
---------------- ----- ------------ -------- - --- -- -- -
---------------- ----- ------------ -------- - --- -- -- -这是一个正常的 Redux 应用程序，我们定义了初始状态并创建了一个 reducer，使用 createStore 函数创建 Redux store 并在其中进行我们的操作。
使用 redux-action-chain，我们可以对上述代码进行如下修改：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ----------------- - ---- ---------------------
----- ------------ - - ------ - --
----- ----------- - -------------------
-------------------- -
----- ------- ------ -- -- ------ ----------- - ------------- ---
--
-------------------- -
----- ------- ------ -- -- ------ ----------- - ------------- ---
---
----- ------- - --------------------------------
----- ----- - ---------------------
------------------ -- -
------------------------------------
---
---------------- ----- ------------ -------- - --- -- -- -
---------------- ----- ------------ -------- - --- -- -- -通过在reducer上套用 createActionChain 函数，我们可以为每个 action 添加更多的操作类型（例如 next、before 等）。最终返回的 reducer，已经被修改为支持链式调用。
调用 addAction 将会创建一个新的重载的“增量更新”版本的 reducer，它将进一步修改它的状态，但不会直接覆盖它。最终每个事件都将被转换为一个操作链，将在 reducer 上运行。
示例二：
下面是一个异步的示例，我们使用 redux-thunk 进行模拟。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
----- ------------ - - ------ - --
-------- ---------- -
------ --- ----------------- -- ------------- -- ---------- -------
-
-------- -------------------- -
------ ----- ---------- -- -
----- -----------
---------- ----- ------------ -------- - ---
--
-
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - -------------- --
---- ------------
------ - ------ ----------- - -------------- --
--------
------ ------
-
-
----- ----- - -------------------- ----------------------------------
------------------ -- -
------------------------------------
---
------------------------------------- ---- -
---------------- ----- ------------ -------- - --- -- -- --使用 redux-action-chain 后，我们可以对上述代码进行如下修改：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ - ----------------- - ---- ---------------------
----- ------------ - - ------ - --
-------- ---------- -
------ --- ----------------- -- ------------- -- ---------- -------
-
-------- -------------------- -
------ ----- ---------- -- -
----- -----------
---------- ----- ------------ -------- - ---
--
-
----- -- - ------------------------------------------ -
----- ------- ------ -- -- ------ ----------- - - ---
---
----- ------- - -----------------------
----- ----- - -------------------- ----------------------------------
------------------ -- -
------------------------------------
---
------------------------------------- -- -- -
---------------- ----- ------------ -------- - --- -- -- -在上述代码中，我们在 createActionChain 中定义了 before 操作，该操作在 incrementAsync 之前触发，我们添加了 incrementAsync 之前增加状态的代码。
注意事项
如果您在创建调用链时需要条件处理、响应式更新或动态组合，建议您使用 redux-observable 或 redux-saga 这样的库。如果你的应用程序非常简单，那么使用 redux-thunk 就足够了。
通过添加更多的方法，在代码中保持单一职责，以避免过于复杂。
熟练掌握基本的 Redux 概念，包括 Redux store 和 reducer。
总结
通过本文，我们对 redux-action-chain 做了基本的介绍。它在 Redux 中的应用可以大大提高异步操作的可读性、可维护性和可扩展性。同时，它也是 Redux 开发中的一个实用工具，可以将使用 Redux 的应用程序开发速度提高数倍。
希望读者们可以学以致用，更多使用经验请自行在项目中尝试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8bdc