Redux 是一个流行的 JavaScript 应用程序状态管理库，它很容易将应用程序状态和界面分离开来，但如果应用程序比较复杂，Redux 的状态树会变得非常大和复杂，这使得状态映射关系变得混乱且难以理解。为了解决这个问题，我们可以使用 npm 包 redux-property-graph，它可以生成一个便于理解的有向无环图（DAG）来显示 Redux 状态树的关系，从而方便我们更好地理解和维护状态树。
安装 redux-property-graph
使用 npm 安装 redux-property-graph：
npm install redux-property-graph
配置 Redux
首先，我们需要在 Redux 存储中启用 redux-property-graph：
import { createStore } from 'redux';
import propertyGraphMiddleware from 'redux-property-graph';
const store = createStore(reducer, applyMiddleware(propertyGraphMiddleware));为了让 redux-property-graph 生成 DAG，我们需要为 Redux 中每个状态属性定义唯一的 ID。我们可以使用一个常量对象来定义这些 ID，并将其传递给 createStore 方法：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ ----------------------- ---- -----------------------
----- -- - -
---- ------
----- -
--- ----------
----- ------------
------ ------------
--
------ -
---- ------------
------ ------------
-
-
----- ------------ - -
--------- ---
------------- -----
--------------- -----
---------------- -----
--------------- ---
----------------- --
--
----- ------- - ------ - ------------- ------- -- -
-- ---
--
----- ----- - -------------------- ----------------------------------------------在上面的示例中，我们使用了一个常量对象来定义 ID，并在 createStore 方法中传递给 redux-property-graph。
使用 Redux DevTools
我们可以使用 Redux DevTools 来在开发过程中查看 redux-property-graph 生成的 DAG。在项目中安装和启用 Redux DevTools 后，我们只需打开浏览器控制台即可查看 DAG。
在 Redux DevTools 中，我们可以通过单击任何状态节点来展开其子节点。我们还可以使用图形导航功能查看 DAG 的不同部分。
示例代码
下面是一个示例代码，它使用了所有的上述概念，以便更好地理解 redux-property-graph：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----------------------- ---- -----------------------
------ - ------------------- - ---- ---------------------------
----- -- - -
---- ------
----- -
--- ----------
----- ------------
------ ------------
--
------ -
---- ------------
------ ------------
-
-
----- ------------ - -
--------- ---
------------- -----
--------------- -----
---------------- -----
--------------- ---
----------------- --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------------
----- - --- ----- ----- - - ---------------
------ -
---------
------------- ---
--------------- -----
---------------- -----
-
---- ----------------------
----- - ----- - - ---------------
------ -
---------
--------------- -------------- -- ---------
----------------- ------------------ ----- -- -- ------- ---------- ---- --- ---
-
--------
------ ------
-
--
----- ----- - ------------
--------
-----------------------------------------------------------------
--
----------------
----- ---------------------
-------- -
--- --
----- -------
------ ------------------
-
---
----------------
----- ----------------------
-------- -
------ -
- --- -- ------ ----- --- -------- -------- -- --
- --- -- ------ ----- --- -------- -------- -- --
- --- -- ------ ----- --- -------- -------- -- -
-
-
---执行上述代码后，我们可以在控制台中看到生成的 DAG。在 DAG 中，我们可以看到状态树的结构和关系。点击某个节点后，可以查看该节点的子节点。这对于状态树的维护和调试非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d51