npm 包 redux-devtools-no-peers 使用教程

阅读时长 4 分钟读完

在前端开发中,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_EXTENSIONREDUX_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

纠错
反馈