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