图片来源：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