什么是 redux-devtools-log-monitor
redux-devtools-log-monitor 是一个用于监控 Redux 应用程序的状态日志的 npm 包。它可以使你更加方便地理解你的 Redux 应用程序的数据流，并且你可以通过它轻松地查看和调试应用程序状态的变化。
安装
要安装 redux-devtools-log-monitor，你可以通过 npm 命令将其作为依赖包来安装：
npm install --save-dev redux-devtools-log-monitor
使用方法
要开始使用 redux-devtools-log-monitor，你需要在你的 Redux store 中启用相应的 middleware。下面是一个示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ - ------------ - ---- ---------------
------ - ---------- - ---- -----------------------------
------ ----------- ---- -------------
----- -------------- - -- -- -
----- ---------- - ---
-- --------------------- --- ------------- -
----------------
--------------
---------- -----
---
--
-
------ ------------
------------
--------------------------------------------------- -----------
--
--
------ ------- ---------------在上面的代码中，我们使用了 Redux DevTools 的 composeWithDevTools 函数，并将 LogMonitor 作为 middleware 添加到了 Redux store 中。如果当前为开发环境，我们还会将 redux-logger 中间件添加到我们的 store 中，以便在控制台上查看调试信息。
当你成功添加了 redux-devtools-log-monitor 中间件之后，你就可以打开 Redux DevTools 插件的 monitor 菜单，并在其中找到我们刚刚添加的 LogMonitor 监控器了。
参数
redux-devtools-log-monitor 支持一些可选的参数，以便你可以根据自己的需求进行配置。
theme
你可以通过 theme 参数来选择你喜欢的主题颜色。默认主题为 nicinabox，你可以通过这样的方式修改主题颜色：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------------
----- -------------- - -- -- -
----- ---------- - ---
-- ---
------ ------------
------------
--------------------
-------------------------------
------------
------ -----------
---
--
--
--toggleVisibilityKey
toggleVisibilityKey 参数可以指定一个用于打开和关闭 LogMonitor 的按键值，默认为 ctrl-h。你也可以设置为 ctrl- 、 ctrl-h / 这样的形式，表示需要多个键同时按下。
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------------
----- -------------- - -- -- -
----- ---------- - ---
-- ---
------ ------------
------------
--------------------
-------------------------------
------------
-------------------- ---------
---
--
--
--changePositionKey
changePositionKey 参数可以让你修改 LogMonitor 的位置。默认情况下，你可以通过按下 ctrl-m 实现 LogMonitor 的位置变化，当然你也可以根据自己的喜好进行修改。
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------------
----- -------------- - -- -- -
----- ---------- - ---
-- ---
------ ------------
------------
--------------------
-------------------------------
------------
------------------ ---------
---
--
--
--总结
通过以上的介绍，你已经了解了 redux-devtools-log-monitor 的使用方法，以及如何对其进行基本的参数配置。通过使用这个 npm 包，你可以更加便捷地查看和调试你的 Redux 应用程序的状态变化，从而更加高效地开发你的前端项目。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------ - ---- ------------
------ -------------- ---- ----------
------ --- ---- -------------------
----- ----- - -----------------
-------
--------- --------------
---- --
------------
--------------------------------
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67521