介绍
reduxible-devtools 是一个用于 React 应用中集成 Redux 调试工具的 npm 包。它可以让你在开发过程中轻松地查看应用内的状态和 Redux action 派发情况，从而快速定位问题。
安装
在项目的根目录中运行以下命令：
npm install --save reduxible-devtools
集成
在你的 Redux createStore() 方法中添加以下代码：
-- -------------------- ---- ------- ------ - ------------ ---------------- ------- - ---- -------- ------ - ------------------- - ---- --------------------------- ------ ------- ---- ------------ ----- ---------------- - --------------------- -- ---------- ----- ---------- ---------- -- --------------- --------- -------- --- ----- ----- - ------------ -------- -- -- ----- ------- ----------------- ---------------- -- --- - - --展开代码
使用
集成完成后，你就可以在日常开发过程中使用调试工具啦！打开运行你的应用程序并进入开发者工具调试窗口，你会看到 Reduxible DevTools 的“Redux”面板。
在“Redux”面板上，你可以看到应用程序的当前状态树，并且可以在时间旅行模式下查看状态历史记录。你还可以在“Action”面板上查看应用程序中的 dispatch 操作。
细节
自定义 action 颜色
你还可以通过 Reduxible DevTools 的配置对象中的 actionColors 属性来自定义 dispatch 操作的颜色。以下是一个示例配置：
-- -------------------- ---- ------- ----- -------------- - - ----- ---------- ---------- --------- -------- ------------- - -------------------- ------- -------------------- ------ -- -- ----- ---------------- - ------------------------------------展开代码
独立窗口
如果你不希望在开发工具中嵌入调试面板，则可以使用独立 Redux DevTools 应用程序。要使用它，只需将 openDevTools 设置为 true：
const devToolsConfig = { name: 'Reduxible DevTools', position: 'right', openDevTools: true, }; const composeEnhancers = composeWithDevTools(devToolsConfig);
此时，你将在应用程序中调用 Ctrl + H 外部浏览器窗口，这个窗口将成为 Redux DevTools 的独立调试器。
结论
Reduxible DevTools 是一个非常实用的开发工具插件，可以帮助开发人员加快调试 React 应用程序的速度。在了解使用方法后，你可以自信而准确地定位应用程序中的问题，提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d24
