简介
redux-devtools-bubbles-monitor 是一个基于 Redux DevTools 的监控组件，它可以让你更加直观地观察你的 Redux 状态变化及其历史记录。在 redux-devtools-bubbles-monitor 中，每一个 redux 状态都会展示成一个气泡，并且随着时间的变化，这些气泡之间的连接也会自动调整，以展示一条更加直观的状态变化路径。
安装和引用
使用 npm 安装 redux-devtools-bubbles-monitor：
npm install --save-dev redux-devtools-bubbles-monitor
在你的 Redux DevTools 配置文件中引用，例如：
import { createDevTools } from 'redux-devtools';
import BubblesMonitor from 'redux-devtools-bubbles-monitor';
const DevTools = createDevTools(
<BubblesMonitor />
);在这个例子中，我们将 BubblesMonitor 作为 createDevTools 的参数传入，则 BubblesMonitor 便会成为我们的 Redux DevTools 组件。
使用方法
在你的 Redux Store 中引入 redux-devtools-bubbles-monitor：
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ - -------- - ---- ---------------
------ - ------- - ---- -------------
------ ----------- ---- -------------
----- ----- - ------------
------------
--------
----------------
---
--
----------
------------------------ - -------------------------- - ---------------------
-
--
------ ------- ------除了引入和使用，redux-devtools-bubbles-monitor 并没有太多特殊的使用限制。它与 Redux DevTools 的使用方式大同小异，只需要在你的 Redux 视图中使用上你的 Redux DevTools 组件即可。
示例代码
下面是一份基于 create-react-app 的示例代码：
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- -------------------
------ - -------- - ---- ---------------
----------------
--------- --------------
-----
---- --
--------- --
------
------------
-------------------------------
--
-- ----------
------ - ----------- - ---- --------
------ - ------- - ---- -------------
------ ----------- ---- -------------
------ - ------------------- - ---- -------------------------------------------
------ - -------------- - ---- -----------------
------ -------------- ---- ---------------------------------
------ ----- -------- - ---------------
--------------- --
--
----- ----- - ------------
------------
--------------------
----------
---------------------
-
--
------ ------- ------
-- ------
------ ----- ---- --------
------ - ------- - ---- --------------
----- --- ------- --------------- -
-------- -
------ -
---- ----------------
---------------------------
------
--
-
-
----- --------------- - ------- -- --
------ -----------
---
------ ------- --------
---------------
-------
-- --------------
------ - --------------- - ---- --------
------ - ------- - ---- -------------
------ - ------------------- - ---- -------------------------------------------
------ - -------- - ---- -----------
------ ------------- ---- ------------------
----- ----------- - -----------------
------- -------------
---
------ ------- ------------
在这个代码示例中，我们通过引用 redux-devtools-bubbles-monitor 的方式实现了一份 Redux DevTools 配置，然后在 App 组件中使用 connect 方法将 redux state 中的 hello 属性绑定到了 React 组件的 props 属性上，这样当我们的 Redux 状态发生变化时，React 组件也会及时更新展示成果。最后，我们将 Redux DevTools 的组件 DevTools 也引入到了我们的项目中，然后使用 Provider 方法将我们的 Redux Store 绑定到了应用内，以此保证应用可以正常地读取并修改我们的 Redux 状态变量。
总结
redux-devtools-bubbles-monitor 是一个实用性、好用性均为一等的 npm 包，它可以让你在编写 Redux 应用的过程中更加轻松地对应用状态变化进行调试和检查。此外，本文中还提供了完整的 npm 包安装、引用和使用示例，欢迎读者下载后参考实践使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b3c