引言
Redux 是 React 中非常重要的状态管理工具，由于 Redux 优秀的设计，我们可以轻松地处理组件之间的状态共享和管理。但是，Redux 在开发过程中，有些部分需要调试。这时，我们就需要通过 Redux DevTools 来方便地调试 Redux 状态。Redux DevTools 是一个非常方便的调试工具，可以方便我们查看 Redux 状态和调试信息。本文将主要介绍如何使用 npm 包 redux-devtools-script 来快速添加 Redux DevTools 功能。
安装
在我们开始使用 npm 包 redux-devtools-script 之前，我们需要先进行安装。在命令行中，输入以下指令即可进行安装：
npm install redux-devtools-script --save-dev
使用
在我们进行 redux-devtools-script 使用之前，我们需要在 Redux Store 中使用 redux-devtools-extension 包来配置 Redux DevTools。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ - ------------------- - ---- -------------------------- ----- ----------- - ----------------- -- -------- -- ----- ----- - ------------ ------------ --------------------- -
在 Redux DevTools 配置完成后，我们需要确保我们的代码引入了已安装的 redux-devtools-script 包。在代码中，我们需要在某个特定事件中注入这些脚本文件。
如果你使用了 React，那么可以这样写：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ - ------------ --------------- - ---- -------
------ - ------------------- - ---- --------------------------
------ - ---------------- - ---- ----------------------------------------------
------ --- ---- -------
----- ----------- - -----------------
-- --------
---
----- ----- - ------------
------------
--------------------
------------------
----- -------- -- ---- -- --- ----- --- -- --- --------- -------
-- ----------------- ------------------
--
-
--
------------------ -- -
-- ----------------- -
---------------------------------
-
--
----------------
--------- --------------
---- --
------------
-------------------------------
--
-- ------ --- ------ --- ----- -- ------ -- - -------- -------- -- ---- -----
-- ------ ---- ------- ---
----- ----------- - -- -- -
----- ------ - --------------------------------
---------- - ----------------------------------------------------------------------------------------
---------------------------------
-
-------------如果你使用原始的 Redux，那么可以这样写：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ - ---------------- - ---- --------------------------
----- ----------- - -----------------
-- --------
--
----- ----- - ------------
------------
------------------
----- -------- -- ---- -- --- ----- --- -- --- --------- -------
-- ----------------- ------------------
--
-
----- ----------- - -- -- -
----- ------ - --------------------------------
---------- - ----------------------------------------------------------------------------------------
---------------------------------
-
-------------以上代码中，我们使用 useDevTools 函数来引入 redux-devtools-script 包。我们将其作为回调函数传递给 Store 方法来确保 Store 实例的完整性。
当你完成 store 实例和 devtools 调试器的启动之后，你就可以在浏览器的开发者工具中（快捷键为 F12）就可以看到 Redux DevTools 面板。
总结
本文介绍了如何使用 npm 包 redux-devtools-script 来快速添加 Redux DevTools 功能。我们知道，使用 Redux DevTools 可以大大提高我们的开发效率，从而更快地找出错误和问题。这个工具不仅适用于 React 应用程序，而且对于其他框架，如 Vue、Angular 等也非常有用。如果你正在大力开发 React 应用程序，那么我们强烈建议你使用 Redux DevTools 来提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b9b