在 Angular 应用中，ngrx 是一个非常流行的状态管理工具，它提供了方便的 API 让我们管理应用程序的状态。但是在使用 ngrx 时，有时候在应用程序中进行状态改变时，会因为一些错误代码而引起 bug。因此，我们需要一个开发工具来帮助我们检测这些错误的代码。这个工具就是 ngrx-store-freeze。
该 npm 包可以保护您的应用程序状态不被随意更改。它使用 object.freeze 方法强制实现单向数据流，防止应用程序状态不经处理就被突然更改的情况发生。
安装
要安装 ngrx-store-freeze，可以使用 npm 包管理器：
npm install ngrx-store-freeze --save-dev
使用方法
要开始使用 ngrx-store-freeze，请在你的 root NgModule 的 AppModule 中导入 StoreModule.forRoot 和 StoreDevtoolsModule.instrument，然后将 ngrx-store-freeze 添加到 enhancers 数组中：
-- -------------------- ---- -------
------ - ------------ -------------- ----------- - ---- --------------
------ - ----------- - ---- --------------------
------ ----- ------------- ----------------------- - ------ -- -------
-----------
-------- -
--------------
----------------------------- - ------------ ---
--------------------------------
------- -- -- ---- -- -----
---
--
---------- --------------
--
------ ----- --------- - -在列表示例中使用 ngrx-store-freeze 块：
-- -------------------- ---- -------
------ ----- ------------- ----- - -
---- ---
--------- --
--
------ -------- ------------- - ------------- ------- ------------------- ----- -
------ ------------- -
---- --------------------------
---- ---------------------------------- -
------ -
-----------------
---- -------------- -------------------------- -- ----------
--------- -------------------------------- - ---- -------- ---- -- ----- ----- -- -
------ -
------------
---------- ----
--
-- - ----------------- --
--
-
---- ---------------------------------------- -
----- ------ - ------------------- -- -- --- -------------------
----- ----------- - ------------------------ - ---- -------- ---- -- --- ------- -- -
------ -
------------
----- ------------------
--
-- ----
------ --------
---------
---- -------
--------- -----------
---
-
-------- -
------ ------
-
-
-
------ ----- ------ - ---------- -- -- ----------- - ------------------ - ------请注意，在上述示例中，我们导入了 storeFreeze 方法，并在 reducer 函数中的每个返回值中使用它来确保状态冻结。
深度解析
什么是 Object.freeze？
Object.freeze 是一个 JavaScript 原生方法，可以将对象和属性干净地归纳为一个单一的状态。像 ngrx 这样的状态管理库通常会构建层次结构，以便更好地组织您的应用程序状态。因此，我们可以使用 Object.freeze 方法，以确保我们的 reducers 状态不能轻易地修改。
为什么要使用 ngrx-store-freeze？
ngrx-store-freeze 包可以防止对象被错误地修改，这是非常重要的，因为我们的应用程序由各种形式的输入和输出组成，因此它们可能会尝试从我们的状态中读取或写入一些信息。
ngrx-store-freeze 还可以帮助我们更好地了解应用程序的状态如何进行更改。通过在控制台记录发出的修改，我们可以更好地理解这些输入和输出之间的关系，并更好地组织我们的状态。
如何使用 ngrx-store-freeze？
要使用 ngrx-store-freeze，您需要在应用程序中导入它，并在 StoreModule 的 metaReducers 数组中添加它。在我们每次执行 reducer 时，我们会将 storeFreeze 方法传递给我们的 reducer，以确保状态从此经过冻结。当 APP_ENV 变量为开发时，不经 freeze 方法的状态可以让我们轻松调试。
结论
ngrx-store-freeze 对于维护 Angular 应用程序状态管理的数据流非常重要。通过帮助我们记录每个状态更改，并防止应用程序状态在未被显式处理的情况下被突然更改，ngrx-store-freeze 可以保持我们的状态具有更高的可维护性和可重用性。希望这篇文章可以帮助您更好地使用 ngrx-store-freeze 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65724