Redux 是前端应用最受欢迎的状态管理库之一。它提供了一种可预测和一致的数据流方法，使开发人员能够轻松地管理应用程序的状态，并随着时间的推移对其进行更改。
在 Redux 中，开发人员可以使用多种工具来监视和调试应用程序状态的变化。redux-devtools 是一个流行的调试工具，可帮助开发人员更轻松地调试他们的 Redux 应用程序。但是如果要在应用程序中使用 redux-devtools，需要通过一个监视器来使用它。
redux-devtools-monitor-dock 介绍
redux-devtools-monitor-dock 是一个 Redux DevTools 的监视器，可以放置在一个 dock 中。 它是一个在 Redux 开发中必不可少的一个 npm 包，可以提供一个便捷的 UI 界面浏览你应用程序的状态。
redux-devtools-monitor-dock 使用起来非常简单。它可以和其他 Redux DevTools 的监视器配合使用，如：LogMonitor 和 ChartMonitor，可以帮助你更好地监视和调试你的 Redux 应用程序。
安装
通过 npm 安装 redux-devtools-monitor-dock：
npm install redux-devtools-monitor-dock --save-dev
使用
安装好 redux-devtools-monitor-dock 后，让我们来看看如何在应用程序中使用它。
1. 导入组件
我们需要首先导入 DockMonitor 组件：
import { DockMonitor } from 'redux-devtools-monitor-dock';2. 在 Redux DevTools 中使用
在创建 Redux DevTools 时，我们需要将 DockMonitor 组件包裹在 <DevTools> 组件中。这里以 react-redux 应用程序为例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - --------- ----------- ---------- - ---- ---------------------------
------ - ----------- - ---- -------------
-- -- -----------
------ - ----------- - ---- ------------------------------
-- -- ----- -----
----- ----- - -------------------------
-- --------
----- --- ------- --------------- -
-------- -
------ -
-----
--- ------ ---
------
--
-
-
-- ------
-------------
-----
--------- --------------
--- -------------- ---
----------- --- ----- -------
------------ ----------------------------
--------------------------
-------------------------
----------- --
--------------
-------------
--- ---- ---
---- --
-----------
-------
-------------------------------
--3. 配置组件
在上面的代码片段中，我们传递了一些属性给 DockMonitor 组件：
toggleVisibilityKey- 打开 / 隐藏 dock 所需的键盘快捷键。changePositionKey- 更改 dock 位置所需的键盘快捷键。defaultIsVisible- 该监视器的默认可见性。
你可以使用这些属性来自定义 redux-devtools 的 DockMonitor：修改键盘快捷键以适应您的需求，或添加更多属性来调整 DockMonitor 的样式。
完整示例
下面是一个完整的示例，可供您学习和参考：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - --------- ----------- ---------- - ---- ---------------------------
------ - ----------- - ---- -------------
-- -- -----------
------ - ----------- - ---- ------------------------------
-- -- ----- -----
----- ----- - -------------------------
-- --------
----- --- ------- --------------- -
-------- -
------ -
-----
--- ------ ---
------
--
-
-
-- ------
-------------
-----
--------- --------------
--- -------------- ---
----------- --- ----- -------
------------ ----------------------------
--------------------------
-------------------------
----------- --
--------------
-------------
--- ---- ---
---- --
-----------
-------
-------------------------------
--当我们在应用程序中使用 redux-devtools-monitor-dock 后，打开应用程序并使用你自定义的键盘快捷键来切换 dock 窗口可见性。你可以看到应用程序的状态更改，以及如何通过 redux-devtools-monitor-dock 进行监视。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b7f