在前端开发中，Redux 是一种非常流行的数据管理工具。Redux DevTools 是一个用于提供更好的开发体验、更方便的调试工具的插件。然而，Redux DevTools 本身并不支持 npm 包的安装，这就大大降低了它的可用性。好在有一个名为 redux-devtools-no-peers 的 npm 包，它可以解决这个问题。本文将详细介绍如何使用 redux-devtools-no-peers 这个 npm 包。
安装
首先，我们需要安装 redux-devtools-no-peers。使用 npm 安装即可：
--- ------- ---------- -----------------------
配置
在 Redux 中使用 Redux DevTools 需要进行一些配置。通常情况下，我们会这样写：
------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - ------------------------ ----------------------------------- -- ---------------------------------------
然而，当我们使用 redux-devtools-no-peers 时，这样的代码会报错。因为 redux-devtools-no-peers 并不是一个 peer dependency，它不能使用 window 对象中的 REDUX_DEVTOOLS_EXTENSION 和 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__。
解决这个问题的方法很简单：用一个专门的函数来创建 store，而不是直接使用 createStore：
------ - ------------ ------- - ---- -------- ------ ----------- ---- ------------- ----- ---------------- - ------- ------ --- ----------- -- -------------------------------------------- -- -------- ----- ----- - ------------------------ --------------------
这里，我们首先用 typeof window 来检查是否在浏览器环境中运行，然后使用三元运算符来判断是否启用了 REDUX_DEVTOOLS_EXTENSION_COMPOSE 插件。最后，将其传递给 createStore 函数。
使用
现在，我们已经可以使用 redux-devtools-no-peers 了。它的用法与原始的 Redux DevTools 没有区别。在使用之前，需要将其导入：
------ - -------------- - ---- --------------------------
接下来，我们可以使用 createDevTools 函数来创建 DevTools 组件：
----- -------- - ---------------
------------ ---------------------------- ---------------------------
----------- --
--------------
--这里，我们创建了一个 DockMonitor，它默认在页面的右边，通过按下 Ctrl+H 可以隐藏或显示它，通过按下 Ctrl+Q 可以改变它的位置。我们将 LogMonitor 作为子组件添加到 DockMonitor 中，并将整个 DevTools 组件保存在一个变量中。
最后，将这个组件添加到我们的应用中：
----------------
--------- --------------
-----
---- --
--------- --
------
------------
-------------------------------
--这里，我们将 DevTools 组件插入到 App 组件的下面，并将它们一起使用 Provider 组件作为根组件渲染。
结论
redux-devtools-no-peers 是一个非常棒的 npm 包，它使得在 npm 环境下使用 Redux DevTools 变得非常容易。本文介绍了安装、配置和使用 redux-devtools-no-peers 的全部过程，希望可以对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067008e361a36e0bce8b73