在前端开发中，使用状态管理工具可以帮助我们更好地组织代码和管理状态。而 Redux 是我们常用的一种状态管理工具。它使得状态管理变得简单且易于调试。但是，当我们需要管理的状态变得越来越复杂，Redux 的窗口会变得越来越深，导致代码的可读性降低，因此，我们需要一种工具，可以帮助我们合理地管理 Redux 窗口，这个时候，我们可以使用 redux-window 这个 npm 包。
redux-window 提供了一种管理 Redux 状态的机制，可以将某些状态窗口从根窗口中提取出来，进行独立管理。这非常有用，对于一些具有相对独立业务的模块，可以单独管理它的状态窗口，从而提高了代码的可读性和维护性。
在本篇文章中，我们将详细介绍如何使用 npm 包 redux-window。
安装和基础使用
首先，我们需要在项目中安装 redux-window：
npm install redux-window --save
然后，我们需要在项目的 store.js 或 index.js 中引入 redux-window：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ---------------------- ---- --------------- ------ ----------- ---- ------------- ----- ------ - - ---- ----------- -- ------------ -- --- ------- -- ----- ---------------- - ------------------------------- ----- ----- - ------------ ------------ ---------------------------------- -- ------ ------- ------
在引入 redux-window 后，我们需要调用 createWindowMiddleware 方法，这个方法会返回一个 redux middleware，这个 middleware 将会被应用到 Redux store 中，从而管理我们的状态窗口。
创建状态窗口
通过 redux-window，创建状态窗口非常容易。我们只需要在创建一个 Redux action 和一个 Redux reducer，在 reducer 中添加状态窗口的逻辑即可。让我们看一个代码示例：
-- -------------------- ---- -------
-- -------------------
------ ----- -------- - -----------
------ -------- ------------ - ----- -
------ - ----- --------- -------- - ---- - --
-
-- --------------------
------ - -------- - ---- ----------------------
----- --------- - -
----- ------
--
------ ------- -------- --------------------- - ---------- ------- -
------ ------------- -
---- ---------
------ - --------- ----- ------------------- --
--------
------ ------
-
-
-- -----------------
------ --------------- ---- -------------
----- ----------- - -----------------
--------- ----------------
---
------ ------- ------------在上述代码中，我们声明了一个名为 myWindow 的状态窗口，它有 show 这个状态字段。我们还声明了 setShow 这个方法，它返回一个带有 show 参数的 action。最后，在 rootReducer 中，我们将 myWindowReducer 和 myWindow 组合在一起。
注册状态窗口
注册状态窗口的过程也非常简单，它只需要在项目中的任意地方调用 registerWindow 方法即可。
import { registerWindow } from 'redux-window';
import * as MyWindowActions from './actions/myWindow';
// 注册 myWindow 状态窗口
registerWindow('myWindow', MyWindowActions.setShow, {
// ...
});在上述代码中，我们调用 registerWindow 方法注册 myWindow 这个状态窗口。registerWindow 方法接受三个参数：
- 状态窗口名称；
- 状态窗口 action；
- 状态窗口配置。
其中，配置项 key 和上面提到的 key 是一致的，它用于与状态窗口绑定；配置项 initialState 是状态窗口的初始化状态；配置项 mapStateToProps 返回我们需提取的状态信息。
具体的配置项还有其它一些，大家可以参考官方文档。
在组件中使用状态窗口
我们已经注册了一个名为 myWindow 的状态窗口，现在，让我们来看看如何在组件中使用它。
我们首先需要将 myWindow 状态窗口的 show 属性与组件的状态进行连接：
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- ------------- ----------- -- -
----- - ---- - - ---------------------
-- ---
-
-------- ---------------------- -
------ -
------------ --------------
--
-
------ ------- --------------------------------------在上述代码中，我们先将整个窗口状态对象（在 init 配置项 key 与 root 一致时，会传入 rootReducer 中）分发给组件，然后通过析取来获取 myWindow 的 show 状态字段。
到这里，我们已经在组件中使用了 myWindow 状态窗口。让我们来看看如何触发它的 action 吧。
-- -------------------- ---- -------
------ - ------------------ -------------- - ---- ---------------
------ - ------- - ---- ---------------------
-------- ------------------ -
-------- ------------- -
----- - ---- - - -------------------------- -------------------
--------------------------------- ------------
-
------ -
-----
------- ---------------------------- ---------------
------
--
-在上述代码中，我们调用了 getWindowState 方法以获取 myWindow 的状态对象。然后，在 handleClick 中，我们调用了 dispatchWindowAct 方法，将 setShow 方法返回的 action 填入前两个参数，并将状态窗口名称填入第三个参数。
这样，我们就完成了在 React 组件中使用 redux-window 的流程。完整的示例代码如下所示。
-- -------------------- ---- -------
-- ------------
------ - ------------ ---------------- --------------- - ---- --------
------ ---------------------- ---- ---------------
------ ----------- ---- -------------
----- ------------ - -
--------- -
----- ------
--
--
----- ------ - -
---- ----------
---------- -------------
--
----- ---------------- - -------------------------------
----- ----- - ------------
------------
-----------------
----------------------------------
--
------ ------- ------
-- -----------------------
------ ----- -------- - -----------
------ -------- ------------ - ----- -
------ - ----- --------- -------- - ---- - --
-
-- ------------------------
------ - -------- - ---- ----------------------
----- --------- - -
----- ------
--
------ ------- -------- --------------------- - ---------- ------- -
------ ------------- -
---- ---------
------ - --------- ----- ------------------- --
--------
------ ------
-
-
-- ---------------------
------ --------------- ---- -------------
----- ----------- - -----------------
-------- ----------------
---
------ ------- ------------
-- ------------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ - -------------- - ---- ---------------
------ - -- --------------- ---- ---------------------
------ --- ---- --------
-- -- -------- ----
-------------------------- ------------------------ -
---------------- -- -- -
------ - ----- ----- --
--
--
----------------
--------- --------------
---- --
------------
-------------------------------
--
-- ----------
------ - ------- - ---- --------------
------ - ------------------ -------------- - ---- ---------------
------ - ------- - ---- ---------------------
------ -------------
-------- ---------- -
-------- ------------- -
----- - ---- - - -------------------------- -------------------
--------------------------------- ------------
-
------ -
---- ----------------
------- ---------------------------- ---------------
---- ------------------ -------- -------- -------------------------- ----------------------- - ------- - ------ ---
- -- - -------
------
------
--
-
-------- ---------------------- -
------ -
------------ --------------
--
-
------ ------- ------------------------------使用 redux-window 可以帮助我们更好地管理 Redux 状态窗口，提高了代码的可读性和维护性。如果你在项目中使用 Redux，强烈建议尝试使用 redux-window。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab081e8991b448d841a