在前端开发中，Redux 是一个非常流行的状态管理工具。而 redux-devtools-chart-monitor-15 是一个用于 Redux 的图表监视器插件，它可以帮助我们更好地理解 Redux 中的数据变化。本文将对其详细介绍。
安装
使用 npm 安装：
npm install redux-devtools-chart-monitor-15 --save-dev
使用
假设你已经使用了 Redux。首先，在你的根组件中导入 redux-devtools-chart-monitor-15 插件：
import ChartMonitor from 'redux-devtools-chart-monitor-15';
然后，在 createStore 函数中将其作为参数传入：
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ ----- ---- --------------
------ ----------- ---- -------------
------ ------------ ---- ----------------------------------
----- ------------ - ---
----- ---------- - --------
----- ---------------- - ------------------------------------------- -- --------
----- ----- - ------------
------------
-------------
-----------------
-------------------------------
--------------
-
--
------ ------- ------这样，你就成功地使用了 redux-devtools-chart-monitor-15 插件。
配置
ChartMonitor 接受一个配置对象作为参数，可以设置以下选项：
title：监视器的标题，字符串类型，默认为Chart Monitor；exclude：不展示的 action 类型，数组类型，默认为空数组；include：只展示的 action 类型，数组类型，默认为空数组；collapse：是否展示时自动折叠，默认为true。
例如，你可以这样配置：
ChartMonitor({
title: 'My Chart Monitor',
exclude: ['ignore_this_action'],
include: ['add_todo', 'delete_todo'],
collapse: false
})效果
当你触发 Redux Store 中的一个 action 时，监视器将收集所有 action 数据，并以图表形式展示。
你可以在图表中自定义选中的数据点，左键单击选中，右键单击取消选中。同时，你可以通过鼠标滚轮或拖拽来缩放或移动图表。具体细节可以在官方文档查看。
示例
这是一个使用 redux-devtools-chart-monitor-15 的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - -------- ---------- - ---- -------------
----- -------- ------- --------- -
------------------ -
-------------
---------- - -
----------- --
--
-
----------------- - - -- -
---------------
----------- --------------
---
--
------------- - -- -- -
--------------------
--- -----------
----- ---------------------
---
---------------
----------- --
---
--
---------------- - -- -- -
--------------------------
--
-------- -
----- - ----- - - -----------
------ -
-----
----
--------------- -- -
--- --------------
------------- --
----- ----------- -- ----------------------------------------
-----
---
-----
-----
------
-----------
-----------------------------
---------------------------------
--
------- -----------------------------------------
------
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
-------- ---- -- ------------------------
----------- -- -- ------------------------
---
------ ------- --------
----------------
------------------
------------如果你触发了 addTodo 或 deleteTodo action，你将在监视器中看到相应的数据变化以及图表效果。
结论
redux-devtools-chart-monitor-15 是一个非常实用的辅助工具，它可以帮助我们更好地理解 Redux 中的数据流。通过本文的介绍，你现在已经掌握了它的基本用法，并有了自定义配置的能力。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b44