前言
在前端开发中，使用 redux 统一管理应用的状态，可以大幅提高应用代码的可维护性和可扩展性。而 redux-devtools 是一个优秀的工具，可以帮助我们在开发中更好地进行调试和分析 redux 状态。
但是，在 redux-devtools 的使用过程中，我们可能遇到一个问题：redux-devtools 默认会将浏览器窗口左边的状态栏和右边的状态栏拼合在一起，如果我们的状态树非常大，那么这个界面将会变得非常臃肿，难以查看。
因此，技术社区中出现了一个名为 redux-devtools-window 的 npm 包，可以将 redux-devtools 窗口拆分成两个独立的部分，帮助我们更好地查看状态树。
接下来，我将详细介绍 npm 包 redux-devtools-window 的使用方法。
安装
redux-devtools-window 是一个 npm 包，可以直接通过 npm 安装：
--- ------- ---------- ---------------------
使用
redux-devtools-window 的使用非常简单，只需要按照以下步骤进行：
导入依赖项：
------ - ------- - ---- -------- ------ - -------------- - ---- ----------------- ------ ----------- ---- ------------------------------ ------ ------------------- ---- ------------------------ ------ ---------- ---- -------------
其中，
redux-devtools-window是我们将要使用的 npm 包。创建 redux-devtools 的实例：
----- -------- - --------------- ------------ ---------------------------- --------------------------- - -- ---- ----- -------------- -- -- - -------------- --在这里，我们创建了一个 DockMonitor 实例，并把它作为参数传入了 createDevTools 方法中。
使用 reduxDevtoolsWindow 方法：
----- ---------------- - -------- ---------------------- --------------------- ---------------
在这里，我们使用了 reduxDevtoolsWindow() 方法，这个方法会把 redux-devtools 窗口拆分成两个独立的部分，并为它们分别指定了样式（
devtools-left和devtools-right）。注意，我们将 reduxDevtoolsWindow() 方法和 DevTools.instrument() 方法都传入了 compose 方法中。
创建 Redux store：
----- ----- - -----------------------------
示例代码
下面是一个完整的示例代码，你可以按照这个代码来使用 redux-devtools-window：
------ ----- ---- --------
------ - ------------ ------- - ---- --------
------ - -------------- - ---- -----------------
------ ----------- ---- ------------------------------
------ ------------------- ---- ------------------------
------ ---------- ---- -------------
----- -------- - ---------------
------------ ----------------------------
---------------------------
- -- ---- ----- -------------- -- -- -
--------------
--
----- ---------------- - --------
----------------------
---------------------
---------------
----- ----- - -----------------------------
-- ----- --------- ---- ---- ----总结
通过使用 npm 包 redux-devtools-window，我们可以将 redux-devtools 窗口拆分成两个独立的部分，避免状态树过大时页面过于臃肿的问题。同时，redux-devtools-window 的使用非常简单，只需要按照上述步骤操作即可。通过这个小小的 npm 包，我们可以更好地使用 redux-devtools 来提高前端开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067008e361a36e0bce8ba8