前言
在前端开发中，处理数据流通常是必须的。Redux 是一个流行的 JavaScript 库，用于管理应用程序的状态，并使其易于维护和更新。但是，在 Redux 中，处理 Action(动作) 时很难做到“所见即所得”，即当前的 state 是什么、下一步 state 是什么，同时又要保证action的幂等性和正确性。
为了解决这个问题，创建了一个名为 redux-action-watch 的 npm 包，它可以在调用 Action 时根据预定义的规则输出 state 变化。在本文中，将详细介绍如何使用这个 npm 包。
安装
要使用 redux-action-watch，首先需要将其安装为依赖项。可以使用 npm 或 yarn 来进行安装。
--- ------- ------------------ - - ---- --- ------------------
使用
Step 1: 配置 ReduxStore
在配置 ReduxStore 中，导入redux-action-watch并加入 middleware。
------ - ------------ --------------- - ---- --------
------ - ------------- - ---- ---------------------
------ ------- ---- ------------
----- ------------ - ---
----- ---------- - ---
----- ----- - ------------
--------
-------------
----------------
--------------
---------------
-- -------
---
--
--Step 2: 添加 Action 规则
创建 Watcher 规则，Watch 规则 为一个对象 ，规则类型可分为： 'before'或'after'。
可以通过 createWatcher API（选项键名为 "before" 和 "after"）添加 观察 规则，在 规则中 应根据 action 来修改记录数据。 观察 规则 类型 有 'before'和'after'。before 规则 是在dispatch(action)调用之前触发的代码逻辑，after规则 是在dispatch(action)调用之后执行的代码逻辑。
---------------
------- -
-
-- -- ---- ---
----- ---------------
-- --- ------ ---
-- ---- -------------
----------- ----------------
-- --------- ---------- ------ ---
-- ----- -----
----- ------- - -------- - --------- - -- -- -
-- -------------
------ -
---------
----------
---------- -----
------------- -
----------------------
----- ------------------------ -- ----- --------------------------
--
--
--
--
--
------ -
-- ----
-
----- -------------
----------- ------------
----- ------- -- -
------------ -
---- ----------
----- --------- - --
---
--
--
--
---Step 3: 观察变化
现在已经在 ReduxStore 中配置了 Watcher 规则，可以开始观察状态更改。
------ --------- ---- --------------------- ------------------------ ---------- --------- -- - -- -- -------- --- ---- ---- --- ------ --------- --- -------- ------------------ --------- ------ ---------- ---------- ---
示例代码
以下是一个完整的示例，演示如何使用 redux-action-watch 来观察 Redux 的状态更改。
------ - ------------ --------------- - ---- --------
------ - -------------- ------- - ---- ---------------------
------ ------- ---- ------------
----- ------------ - ---
----- ---------- - ---
----- ----- - ------------
--------
-------------
----------------
--------------
---------------
------- -
-
----- -------------------
----------- ----------------
----- ------- - -------- - --------- - -- -- -
--------------------------------
------ -
---------
----------
--
--
--
-
----- ---------------------
----------- ------------
----- ------- -- -
----------------------------------
------ -
---------
---- --------- - --
----- --------- - --
--
--
--
--
------ -
-
----- -------------
----------- ------------
----- ------- -- -
--------------------------
------ ------
--
--
--
---
--
--
------------------------ ---------- --------- -- -
------------------ --------- ------ ---------- ----------
---
----------------
----- ----------------
-------- -
---------- -----------
--
---
----------------
----- ------------
---
----------------
----- ------------
---
----------------
----- ------------
---在命令行中执行该文件，可以看到以下输出：
---------------- ------------------ ---------- ----- ------- - ---------- -------------- ---- -- ----- - - - ---- -- ----- - - - ------- - ----- ----------- -- ----- -------- ----- - ----- ------------ - - ----- ------- - -------- - - -- - ------- - ----- -------------- -- ----- --------- ----- - ----- ------------------------- - - ----- ------- - ---------- -------------- ---- -- ----- - - - ---------- -------------- ---- -- ----- - - - ------- - ----- ----------- -- ----- --------- ----- - ----- -------------------- - - ----- ------- - ---------- -------------- ---- -- ----- - - - ---- -- ----- - - - ------- - ----- ----------- -- ----- -------- ----- - ----- -------------------- - -
结论
redux-action-watch 是一个强大的 npm 包，可以方便地观察状态更改，从而使得在 Redux 中处理 Action 变得更加轻松且直观。本文介绍了如何安装、配置、添加规则以及观察变化。希望本文能够帮助您更好地使用 redux-action-watch。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700ae361a36e0bce8c46