前言
Redux 是一个极好的状态管理工具，但是在使用过程中，我们难免会遇到一些问题，比如说：为什么这个状态变量一直为 null？或者是一个 action 无法触发 reducer？
在这种情况下，Redux DevTools 可以给我们提供很好的帮助。它能够让我们更好地理解应用状态的变化，找到并解决在 Redux 中的问题。本文将主要介绍一个叫做 redux-devtools-log-monitor-console 的 npm 包，通过它我们可以查看应用状态的变化，从而更好地排除问题。
安装
首先我们需要在项目中安装 redux-devtools-log-monitor-console 包，可以通过如下命令进行安装：
npm install --save-dev redux-devtools-log-monitor-console
这里我们将其安装到开发环境中，因为它只是在开发阶段帮助我们调试，而不需要被打包到最终的生产环境中。
安装完成之后，我们需要将其添加到我们的 Redux DevTools 中。在这之前，我们需要确认项目中是否已经添加了 Redux DevTools 工具。如果没有添加，请参照以下代码：
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, initialState, composeWithDevTools());这里我们所需要关注的是 composeWithDevTools()，这个函数将我们的 DevTools 工具整合到我们的 Redux Store 中。我们需要对它进行一点小小的调整：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ ---------- ---- -------------------------------------
----- ----- - -------------------- ------------- --------
--------------------
------------
------- - ---------- ---------- ------- ---------- ---------- --------- --
---------------- -----------
--
-
---在这里，我们将 LogMonitor 组件传递给了 composeWithDevTools 函数，它将显示在开发者工具的 Monitor 列表中。
使用
Redux DevTools 提供了很多的帮助方法，可以让我们更好地理解应用状态的变化。其中，redux-devtools-log-monitor-console 主要提供了下面这些帮助方法：
- pauseConsoleLog()：暂停控制台记录状态信息。
- resumeConsoleLog()：恢复控制台记录状态信息。
- setActionFilter(filter: function)：设置 Action 过滤器。
- setStateFilter(filter: function)：设置 State 过滤器。
- setLogLevel(logLevel: string)：设置日志级别。
- clearConsole()：清除控制台中的状态信息。
- togglePersist()：打开/关闭持久化。
- exportState()：将当前的状态信息导出为一个 JSON 对象。
- importState(json: object)：将一个 JSON 对象导入为状态信息。
这些方法可以在开发者工具的控制台中使用。例如，在控制台中，我们可以执行如下命令：
pauseConsoleLog()
这会将控制台日志的记录暂停下来，这对于研究特定状态变化非常有帮助。
示例
下面是一个示例代码，它可以让你更好地理解如何使用 redux-devtools-log-monitor-console：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ ---------- ---- -------------------------------------
----- ------------ - -
------ -
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ -----
-
--
----- ----- - -------------------- ------------- --------
--------------------
------------
------- - ---------- ---------- ------- ---------- ---------- --------- --
---------------- -----------
--
-
---
---------------- ----- ----------- --- -- ------ -
---------------- ----- ----------- --- -- ------ -
---------------- ----- ----------- --- -- ------ -
------------------
---------------- ----- ----------- --- -- ------ -
------------------------ -- ----------- --- -------------
---------------- ----- ----------- --- -- ------ -
---------------- ----- ----------- --- -- ------ -
----------------------
---------------------- -- ----------- - ---
---------------- ----- ----------- --- -- ------ -
-------------------
---------------- ----- ----------- --- -- ------ -
--------------
-- ------- - ------ - -
------------- ------ - ---结论
通过使用 redux-devtools-log-monitor-console，我们可以更好地理解应用状态的变化。我们可以查看应用的状态，找出错误，并更快地排除问题。因此，我强烈建议你在开发 Redux 应用时使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b7b