前言
在前端开发中，处理数据流通常是必须的。Redux 是一个流行的 JavaScript 库，用于管理应用程序的状态，并使其易于维护和更新。但是，在 Redux 中，处理 Action(动作) 时很难做到“所见即所得”，即当前的 state 是什么、下一步 state 是什么，同时又要保证action的幂等性和正确性。
为了解决这个问题，创建了一个名为 redux-action-watch 的 npm 包，它可以在调用 Action 时根据预定义的规则输出 state 变化。在本文中，将详细介绍如何使用这个 npm 包。
安装
要使用 redux-action-watch，首先需要将其安装为依赖项。可以使用 npm 或 yarn 来进行安装。
npm install redux-action-watch # 或 yarn add redux-action-watch
使用
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 规则，可以开始观察状态更改。
import {watcher} from 'redux-action-watch';
watcher.onChange((state, prevState, metaInfo) => {
// Do whatever you want with the state, prevState and metaInfo
console.log('state changed', state, prevState, metaInfo);
});示例代码
以下是一个完整的示例，演示如何使用 redux-action-watch 来观察 Redux 的状态更改。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - -------------- ------- - ---- ---------------------
------ ------- ---- ------------
----- ------------ - ---
----- ---------- - ---
----- ----- - ------------
--------
-------------
----------------
--------------
---------------
------- -
-
----- -------------------
----------- ----------------
----- ------- - -------- - --------- - -- -- -
--------------------------------
------ -
---------
----------
--
--
--
-
----- ---------------------
----------- ------------
----- ------- -- -
----------------------------------
------ -
---------
---- --------- - --
----- --------- - --
--
--
--
--
------ -
-
----- -------------
----------- ------------
----- ------- -- -
--------------------------
------ ------
--
--
--
---
--
--
------------------------ ---------- --------- -- -
------------------ --------- ------ ---------- ----------
---
----------------
----- ----------------
-------- -
---------- -----------
--
---
----------------
----- ------------
---
----------------
----- ------------
---
----------------
----- ------------
---在命令行中执行该文件，可以看到以下输出：
log正在设置timesTamp
count操作完成后，cnt1增加1
count操作完成后
state changed { timesTamp: 1629512636954, cnt: 2, cnt1: 2 } { cnt: 1, cnt1: 1 } { action: { type: 'INC_COUNT' }, type: 'after', rule: { name: 'count操作完成后' } }
state changed { counter: 0 } {} { action: { type: '@@redux/INIT" }, type: 'before', rule: { name: 'redux-action-watch/INIT' } }
state changed { timesTamp: 1629512636954, cnt: 2, cnt1: 2 } { timesTamp: 1629512628608, cnt: 1, cnt1: 1 } { action: { type: 'INC_COUNT' }, type: 'before', rule: { name: 'count操作完成后，cnt1增加1' } }
state changed { timesTamp: 1629512636954, cnt: 2, cnt1: 2 } { cnt: 1, cnt1: 1 } { action: { type: 'INC_COUNT' }, type: 'after', rule: { name: 'count操作完成后，cnt1增加1' } }结论
redux-action-watch 是一个强大的 npm 包，可以方便地观察状态更改，从而使得在 Redux 中处理 Action 变得更加轻松且直观。本文介绍了如何安装、配置、添加规则以及观察变化。希望本文能够帮助您更好地使用 redux-action-watch。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ae361a36e0bce8c46