在前端开发中,Redux 是一种非常流行的数据管理工具。Redux DevTools 是一个用于提供更好的开发体验、更方便的调试工具的插件。然而,Redux DevTools 本身并不支持 npm 包的安装,这就大大降低了它的可用性。好在有一个名为 redux-devtools-no-peers 的 npm 包,它可以解决这个问题。本文将详细介绍如何使用 redux-devtools-no-peers 这个 npm 包。
安装
首先,我们需要安装 redux-devtools-no-peers。使用 npm 安装即可:
npm install --save-dev redux-devtools-no-peers
配置
在 Redux 中使用 Redux DevTools 需要进行一些配置。通常情况下,我们会这样写:
import { createStore } from 'redux'; import rootReducer from './reducers'; const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
然而,当我们使用 redux-devtools-no-peers 时,这样的代码会报错。因为 redux-devtools-no-peers 并不是一个 peer dependency,它不能使用 window 对象中的 REDUX_DEVTOOLS_EXTENSION 和 REDUX_DEVTOOLS_EXTENSION_COMPOSE。
解决这个问题的方法很简单:用一个专门的函数来创建 store,而不是直接使用 createStore:
import { createStore, compose } from 'redux'; import rootReducer from './reducers'; const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose; const store = createStore(rootReducer, composeEnhancers());
这里,我们首先用 typeof window 来检查是否在浏览器环境中运行,然后使用三元运算符来判断是否启用了 REDUX_DEVTOOLS_EXTENSION_COMPOSE 插件。最后,将其传递给 createStore 函数。
使用
现在,我们已经可以使用 redux-devtools-no-peers 了。它的用法与原始的 Redux DevTools 没有区别。在使用之前,需要将其导入:
import { createDevTools } from 'redux-devtools-no-peers';
接下来,我们可以使用 createDevTools 函数来创建 DevTools 组件:
const DevTools = createDevTools( <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q"> <LogMonitor /> </DockMonitor> );
这里,我们创建了一个 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