在前端开发中，Redux 是一个非常流行的状态管理工具，但是当我们在开发中遇到问题时，如何去调试 Redux 应用呢? 这时我们可以利用 Redux DevTools 工具来方便地调试。
Redux DevTools
Redux DevTools 是一个为开发者提供的可扩展的开发工具，它可以用于调试 Redux 应用程序的状态和行为，包括受控、无状态组件和纯组件。
Redux DevTools 存在两种不同的使用方式：一种是作为浏览器扩展，另一种是作为一个独立的 Electron 应用程序来运行。
安装浏览器扩展
在 Chrome FireFox 或者 Edge 浏览器商店搜索 “Redux DevTools” 插件并安装，扩展程序会默认自动启用，安装完成之后，在使用 Redux 应用程序时也要确保已经启用了该插件。
安装 Electron 应用程序
Redux DevTools 也可以作为 Electron 应用程序来运行，使用 Electron 可以让 DevTools 与您的应用程序不同步地运行，这将使调试和优化重复的应用程序变得更加简单。
首先，使用以下命令来安装可扩展的 Redux DevTools 应用程序:
npm install --save-dev electron-devtools-installer
在你的 main.js 或 main.ts 中添加以下代码：
-- -------------------- ---- ------- ----- - ------- - - -------------------- ----- - ------- - - --------------------------------------- ------------------------------------------ --------- ----- ------ ---------- --- ----------------------------------- -- ----- -------- - ------ --- ----- ----- --------- --------- -- ---- -------- -- -- ------------ -- ------------------ ---------- ---------- ------------ -- --------------- ----- --------- -- ------ -- ------- --------------------- -- --------------------------------
现在 Redux DevTools 应用程序已经集成在您的应用程序中了。运行应用程序并使用 Ctrl + Shift + I / Cmd + Shift + I 打开 DevTools ，然后点击 Redux DevTools （感叹号图标）即可开始使用。
在 Redux 中启用 DevTools
通过下面的步骤，你可以在你的应用程序中启用 Redux DevTools。
1、安装 Redux DevTools 扩展
在你的浏览器中下载并安装 Redux DevTools 扩展。
2、在 createStore 中使用 Redux DevTools
在开发环境下，我们可以在 createStore 函数中使用 Redux DevTools：
const store = createStore(
reducers,
+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);第二个非必要参数在开发者工具被打开时在页面只有 DevTools 插件才会在 Redux 中启动。
可以连接类似这样：
const store = createStore(reducer, preloadedState,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
trace: true,
traceLimit: 25
})
)可选的附加选项：
- trace: 以编程方式调用 Redux API 时是否记录跟踪？
- TraceLimit: 跟踪应记录的操作数。
如果需要更多的高级定制选项，请参考官方文档。
3、使用 React DevTools 调试
我们可以借助于 React DevTools 来更好地调试 Redux 应用程序。
安装 React DevTools 扩展以启用该功能。在 Chrome 的应用或者扩展菜单中右键单击 React DevTools 扩展以选择“打开 DevTools”按钮进行调试。
总结
通过本篇文章，我们学习了如何使用 Redux DevTools 来调试 Redux 应用程序，了解了如何在浏览器和 Electron 应用程序中安装 Redux DevTools，并在应用程序中使用它们。我们还学习了如何使用 React DevTools 调试。Redux DevTools 能够极大地提高 Redux 应用程序的开发效率，为开发人员提供更好地问题解决方式。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
-- -- ----
----- ------- - -- ------ ------------ ----------- -- -- -
-----
----------------
------- --------------------------------
------- --------------------------------
------
--
-- ----- ----
----- ------- - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- ---
--------
------ ------
-
-
-- -- ----- --------- -------- ---------
----- ----- - ------------
--------
----------------------------------- -- -------------------------------------
-
-- -----
----- --- ------- --------------- -
------ -- -
------ -
--------
------------------------
--------------- -- ---------------- ----- ----------- ---
--------------- -- ---------------- ----- ----------- ---
--
-
-
-
-- --------
----------------
---- ---
-------------------------------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6504305c95b1f8cacd0eaf75