在前端开发中，Redux 是一个非常流行的状态管理库。它可以帮助我们更好地组织我们的代码，让状态管理变得更加简单。redux-action-man 是一个非常实用的 npm 包，可以帮助我们更容易地管理 Redux 中的 Action。
安装和基本使用
首先，我们需要安装 redux-action-man 包。在终端中输入以下命令：
--- ------- ---------------- ------
或者使用 yarn：
---- --- ----------------
接着我们需要在我们的代码中导入可以使用的部分：
------ - ------------- -------------- ------------- - ---- -------------------
现在，我们可以使用这个包来创建我们的 Actions 和 Reducer，同时不需要再写大量的模板代码。以下是一个典型的使用 redux-action-man 的方法：
----- ------- - ------------------------ ------ -- -- ---- ----
----- ------------ - ----------------- -
--------------- ------- ------- -- -
---------
- ------------------ ---------- ----- --
--
---
----- - ------- - - ---------------
-------- ------ -- -- ---- ---
---我们可以将这些代码放入我们应用程序的主要代码中，以便更轻松的管理我们的 Action 和 Reducer。现在，我们已经成功地使用了 redux-action-man 包，我们可以继续深入研究此工具的更高级功能。
高级功能
redux-action-man 实际上提供了更多比上面提到的基本功能，让我们看看如何使用这些高级功能。
合并多个 Reducers
在 Redux 中，通常会有一系列的 Reducers，但使用传统的方式，我们必须写大量的 switch case 语句来合并这些 Reducers。使用 redux-action-man，我们可以非常简单地合并多个 Reducers，如下面的示例代码：
------ - --------------- - ---- ------------------- ----- -------- - ----------------- - --------- ------- ------- -- ---------- ---------------- ------------ ------- ------- -- ----------------- -- ------- --- ---------------- --- ----- -------- - ----------------- - --------- ------- ------- -- -- --------- ----- -------------- --- ----------- -- -- -- --- --- ----- ----------- - ----------------- ------ --------- ----- --------- --- ------ ------- ------------
使用 Namespaces 来组织 Actions 和 Reducers
Redux 中可能会有大量的 Action 和 Reducer，这使得在应用程序中使用起来变得困难。为了简化这个问题，redux-action-man 提供了一个 Namespaces 功能。此功能为 Action 和 Reducer 提供了一个层次结构和一些组织功能，使所有相关代码都可以在一个命名空间下统一管理。
如下所示，我们将一些特定的 Action 和 Reducer 放在一个名为 "cart" 的 Namespace 下：
------ - ------------- - ---- ------------------- ----- ------------- - ---------------------- ----- - -------- ---------- - - ----------------------------- --------- ------ -- -- ---- --- ------------ ---- -- -- -- --- --- ----- ------- - ------------------------------- - --------- ------- ------- -- ---------- --------------------- ------------ ------- ------- -- ----------------- -- ------- --- ------------------- --- ------ - -------- ----------- -------- --
动态结构的 State 和 Payloads
有时候我们需要处理动态的 State 和 Payload，redux-action-man 提供了一些方法使得这些情况变得容易处理。utils 的 set 和 del 可以让我们更轻松地更新对象和数组，并自动扁平化任何嵌套属性。
------ - ---- --- - ---- ----------------------------- -- ------ - -------- -- -- ------ ----- ------ - - ------- - ----- ----- - -- ----------- ------------- ---- -- ---- --- ----- --- ------- ------- ---- --------- -- ------ - -------- ---- -- ------ ----- ------ - - ----- --------- -------- -------- -- ----------- ----------- -- ------- --- ----- ----
对于 Array，utils 的 insert 和 remove 可以让我们更加方便地插入和删除元素：
------ - ------- ------ - ---- ----------------------------- -- ------ -- ------- ---- -- ----- ----- ------ - - ----- --------- -------- -------- -- -------------- --------- ----------- -- ------- --------- -- ----- - -- ------ -- ------- ---- -- ----- ----- ------ - - ----- --------- -------- -------- -- -------------- ---------- -- ------- ---- -- ----- -
使用 middleware 修改 Action 或者 State
redux-action-man 中还提供了一些 middleware，这允许我们在执行 Action 或者 Reducer 时为其注入一些额外的逻辑等。
如下所示，我们通过 withMiddleware 创建 middleware 来进行操作。middleware 是一个简单的函数，它接受 currentState、action 和的 dispatch 三个参数，在 MiddleWare 中我们可以根据这些参数经过我们的处理后，返回修改后的信息。middlewares 在 dispatch action 或者 reducer 过程中执行，我们可以把 injectMiddleware 是个提供中间件的 HOC (高阶组件)。
------ - -------------- - ---- -------------------
------ - ------------------ - ---- --------
----- ------------ - -------------- ------- --------- -- -
-- ------------ --- --------------- -
------ - ------ - --------- -------------- -- --------------- ---- --
-- ------- ------- ---- ------- -- ------- --- ---------------- ---- -- ----
-
------ - ------ ---- -- -- -------- ------ -------- -------
--
----- --------- - -- ----------- -- -- -
------------ -- -
-------------------
-- ----
------ -----
--
----- ------------------ - ---------- -- --------------------
------------ ------------------------- -- -- ----- --------------- -------- -------- --- ----------------
-- ----------
------ ------- ------------- -------------------------------结论
在本文中，我们深入研究了使用 redux-action-man 包。我们学习了如何轻松地创建 Actions 和 Reducers，同时还有一些高级功能，例如合并多个 Reducers、Namespaces、动态 Struct 和使用 middleware 等。当我们学会了这些功能时，使用 Redux 将会变得容易许多。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067009e361a36e0bce8bed