npm 包 redux-devtools-ui 使用教程

阅读时长 10 分钟读完

图片来源:medium.com

简介

redux-devtools-ui 是一个 React 组件,是用于调试 Redux 应用程序的工具。它可以让你可视化你的 Redux store,显示你的 action 发布的地方和重播与撤销这些 action。redux-devtools-ui 功能非常强大,可以提高开发效率和品质。

安装

使用 npm 安装 redux-devtools-ui,打开终端,运行下面的命令:

使用

基本使用

在你的项目中引入 redux-devtools-ui:

在你的项目中,把 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

纠错
反馈