图片来源:medium.com
简介
redux-devtools-ui 是一个 React 组件,是用于调试 Redux 应用程序的工具。它可以让你可视化你的 Redux store,显示你的 action 发布的地方和重播与撤销这些 action。redux-devtools-ui 功能非常强大,可以提高开发效率和品质。
安装
使用 npm 安装 redux-devtools-ui,打开终端,运行下面的命令:
npm install --save-dev redux-devtools-ui
使用
基本使用
在你的项目中引入 redux-devtools-ui:
import { createDevTools } from 'redux-devtools-ui'; const DevTools = createDevTools(); export default DevTools;
在你的项目中,把 DevTools
组件渲染到 DOM 中:
-- -------------------- ---- ------- ------ -------- ---- ------------- ---------------- --------- -------------- ----- ------------------ -- --------- -- ------ ------------ ------------------------------- --
这样就可以在应用程序中使用 redux-devtools-ui 了!
配置
redux-devtools-ui 可以配置以适应不同的项目需求。以下是一些常见的配置示例:
-- -------------------- ---- ------- ------ - -------------- - ---- -------------------- ------ ----------- ---- ------------------------------ ------ ---------- ---- ----------------------------- ----- -------- - ---------------- -------- ----------- -- ---- ------ ------- --------- --------- -- ---------- -------------------- - -------- -------------------- --------- -- ---------------- --------- ------------------ --------- -- --------- ----------------- ------- --------- ----------------- ------ -- ---------------- ----- ------------ ---- -- --------------------- ---- --------- - ----------------- ---- ---- -- --------- ------- --------------- ---- --- -- -------- ------- -- -- -------------------- -- --- ------ ------- ---------
高级用法
使用 redux-devtools-ui 还可以进行一些高级调试,比如时间旅行,这个特性可以帮助你改进重播性能问题以及找出导致状态变化的 bug。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - --------- ----------- ---------- - ---- -------------------- ------ ------- ---- ------------ ----- ----- - --------------------- -- ----------- ---------------- ----- --------- -------------- ------------------ -- ----------- ------------ --------- ------------- -------------------- -- ------------- ------- ------------------------------- --
示例代码
以下是一个完整的示例,帮助你更好地理解如何在 Redux 应用程序中使用 redux-devtools-ui:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------------ --------------- - ---- -------- ------ - -------- - ---- -------------- ------ - -------------- - ---- -------------------- ------ ----------- ---- ------------------------------ ------ ---------- ---- ----------------------------- -- -------- ----- ----- - ------ - --- ------- -- - ------ ------------- - ---- ----------- ------ ---------- ---- ---------- ----- ------------ --------- -------- ---- -------------- ------ -------------- -- ------- --- --------- - --------- --------- --------------- - ------ -------- ------ ------ - -- ----- ---------------- - ------ - ----------- ------- -- - ------ ------------- - ---- ------------------------ ------ -------------- -------- ------ ------ - -- ----- ------- - ----------------------- ------------------- -- ----- ----- -------- - ---------------- -------- ----------- --------- -------- --- ----- ----- - -------------------- ----------------------- -- --- ----- ------ - -------------- -------- --------------- -- - ------ - ---------------- ---- ------ -------- ----------- -- --------------------------------- ------ -------- ----------- -- --------------------------------------- ------ -------- ----------- -- --------------------------------------------- ----- -------- ----- ----------------- ----------------- -- -- ----- ---- - ------- --------- --------- -- - ------ - --- ------------------ --------- ------ --------------- ------------------ ----------------- -- ----- ----------------------- -------- - -------------- - --------- ------ ------- ----- -- -- ----- -------- - -------- ------------- -- - ------ - ---- --------------- -- ----- ------------- --------- ----------- -- --------------------- -- -- ----- -- -- ----- ------- - ----------- -- - --- ----- - ----- ----- ------------ - - -- - ------------------- -- --------------------- - ------- - --------------------- ----------- - --- -- ------ - ----- ------------------------ ------ ----------- --------- -- ----- - ----- -- ------- ----------------- ------------- ------- -- -- ----- ------- - -------- ----------------- ------------ ------------ ---------- --------------- -- - ----- ------------ - --- -- - ------ ------------------ - ---- ----------- ------ ------ ---- ----------------- ------ ----------------- -- --------------- ---- -------------- ------ ----------------- -- ---------------- - ----- ------ - ----- -------- -------- -------- ------------- -- -------------- ------------ - -- ------- -- --------- -------------------- --------------- -- ---------------- -- ------- ------------------------- --------------- -- ---------------------- -------------------------------- -- ------ -- -- -- ------ ---------------- --------- -------------- ----- -------- ------------------------------ ---------------------------------------------------- ----------------------------------------------- -- ----------------------- --------------- -- --------------------- -------------- ----- --------------- -- --------------------- ----------- ---------- --------------------- -- --------------------- ------------------------ --------- -- --------- -- ------ ------------ ------------------------------- --
结论
redux-devtools-ui 是一个十分实用的工具,可帮助你更快、更高效地开发 Redux 应用程序。尽管它一开始使用可能有些复杂,但在熟悉使用之后,你将享受到它为你带来的优势。希望这篇文章可以给你学习和使用 redux-devtools-ui 带来帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b9d