npm 包 redux-devtools-window 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，使用 redux 统一管理应用的状态，可以大幅提高应用代码的可维护性和可扩展性。而 redux-devtools 是一个优秀的工具，可以帮助我们在开发中更好地进行调试和分析 redux 状态。

但是，在 redux-devtools 的使用过程中，我们可能遇到一个问题：redux-devtools 默认会将浏览器窗口左边的状态栏和右边的状态栏拼合在一起，如果我们的状态树非常大，那么这个界面将会变得非常臃肿，难以查看。

因此，技术社区中出现了一个名为 redux-devtools-window 的 npm 包，可以将 redux-devtools 窗口拆分成两个独立的部分，帮助我们更好地查看状态树。

接下来，我将详细介绍 npm 包 redux-devtools-window 的使用方法。

安装

redux-devtools-window 是一个 npm 包，可以直接通过 npm 安装：

npm install --save-dev redux-devtools-window

使用

redux-devtools-window 的使用非常简单，只需要按照以下步骤进行：

导入依赖项：

import { compose } from 'redux';
import { createDevTools } from 'redux-devtools';
import DockMonitor from 'redux-devtools-dock-monitor';
import reduxDevtoolsWindow from 'redux-devtools-window';
import appReducer from './reducers';

其中，redux-devtools-window 是我们将要使用的 npm 包。

创建 redux-devtools 的实例：

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h"
               changePositionKey="ctrl-q">
    { /* here comes redux-devtools UI */ }
  </DockMonitor>
);

在这里，我们创建了一个 DockMonitor 实例，并把它作为参数传入了 createDevTools 方法中。

使用 reduxDevtoolsWindow 方法：
```
const finalCreateStore = compose(
  reduxDevtoolsWindow(),
  DevTools.instrument()
)(createStore);
```
在这里，我们使用了 reduxDevtoolsWindow() 方法，这个方法会把 redux-devtools 窗口拆分成两个独立的部分，并为它们分别指定了样式（devtools-left 和 devtools-right）。

注意，我们将 reduxDevtoolsWindow() 方法和 DevTools.instrument() 方法都传入了 compose 方法中。

创建 Redux store：

const store = finalCreateStore(appReducer);

示例代码

下面是一个完整的示例代码，你可以按照这个代码来使用 redux-devtools-window：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ------- - ---- --------
------ - -------------- - ---- -----------------
------ ----------- ---- ------------------------------
------ ------------------- ---- ------------------------
------ ---------- ---- -------------

----- -------- - ---------------
  ------------ ----------------------------
               ---------------------------
    - -- ---- ----- -------------- -- -- -
  --------------
--

----- ---------------- - --------
  ----------------------
  ---------------------
---------------

----- ----- - -----------------------------

-- ----- --------- ---- ---- ----

总结

通过使用 npm 包 redux-devtools-window，我们可以将 redux-devtools 窗口拆分成两个独立的部分，避免状态树过大时页面过于臃肿的问题。同时，redux-devtools-window 的使用非常简单，只需要按照上述步骤操作即可。通过这个小小的 npm 包，我们可以更好地使用 redux-devtools 来提高前端开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8ba8