前言
Redux 是一种可预测的状态管理容器，而 Redux Action 是为了描述数据的变化而发送给 Redux Store 的普通 JavaScript 对象。
Redux Action Processor (RAP) 则是一个处理 Redux Action 的工具，并且可以实现更高级的功能，例如异步调用，条件执行等。在本文中，我们将介绍 npm 包 redux-action-processor 的使用教程。
安装
你可以使用 npm 安装 redux-action-processor。
--- ------- ----------------------
同时，你需要将 redux-action-processor 创建的 Redux Store 和 Middleware 引入到你的应用程序中。
------ - ------------ --------------- - ---- -------- ------ - ---------------- - ---- ------------------------- ------ ----------- ---- ------------- ----- ------------- - ------------------- ----- ----- - ------------ ------------ ------------------------------ --
基本使用
RAP 可以处理两种类型的 Redux Action: Plain Object 和 Function。
对于 Plain Object，RAP 可以触发 before 和 after 两个事件来处理，并可以通过设置 stopPropagation 属性来阻止执行后续 Middleware。
对于 Function，RAP 会调用此函数，并传入 dispatch 和 getState 两个参数，同时支持 Promise 异步调用。
在 Action 完成后，RAP 会调用 Redux Store 的 dispatch 方法来 dispatch 一个 Action。
下面是一个在 RAP 中使用 Plain Object 和 Function 的示例：
----- --- - --- -- -- -
------ - ----- ------ -------- - - - --
-
----- ----------- - ----- ---------- --------- -- -
----- --- - ----- -------------------
----- ---- - ----- -----------
---------- ----- ------------- -------- ---- ---
-
----- ------- - ------- ------- -- -
------------------- -
---- ------
------ - ------- -------------- --
---- -------------
------ - ----- -------------- --
--------
------ ------
-
-
----- ------------- - ------------------
------- -------- -- -
------------------- ------- ----------------------------
--
------ -------- -- -
------------------ ------- ----------------------------
-
---
----- ----- - ------------
--------
------------------------------
--
--------------------- ----
-- ------ ------- --------------------------
-- ----- ------- --------------------------
----------------------------
-- ------ ------- ----------
-- ----- ------- ----------------------------------高级使用
除了基本功能之外，RAP 还支持一些高级功能，例如条件执行，中止流程等。可以通过配置 rules 属性来实现这些功能。
----- ----- - -
-
-------- -------------
---------- -------- --------- -- -
------ --------------------- - ---
--
------- -------- --------- -- -
------ -
----- ------------
-------- ----- ------ -- --- -------
--
-
--
-
-------- -----------
---------- -------- --------- -- -
------ ----------------- --- ---------------
--
------- -------- --------- -- -
------ -
----- ----------------
-------- -----
--
-
-
-
----- ------------- - ------------------
------- -------- -- -
------------------- ------- ----------------------------
--
------ -------- -- -
------------------ ------- ----------------------------
--
-----
---上述代码中，我们设置了两个 rules。
第一个 rule 的 pattern 为 FETCH_DATA，condition 验证 payload 是否大于 10，如果满足条件，则 effect 返回一个 ADD_ALERT 的 Action。
第二个 rule 的 pattern 为以 FILTER_ 开头的任意字符串，condition 验证 Redux Store 的 filter 属性是否等于 payload，如果等于，则 effect 返回一个 TOGGLE_FILTER 的 Action。
结语
Redux Action Processor 是一个用于处理 Redux Action 的非常有用的工具，它不仅提供了基本功能，还支持高级功能，例如条件执行和中止流程等。
通过本文，你已经可以更好的了解和使用 redux-action-processor 这个 npm 包了。如果你有任何问题或建议，请随时在评论区留言。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668eed9381d61a3540cd4