背景
@ngrx/devtools 是一个基于 Redux DevTools 的 Angular 开发工具包，用于监视和调试 NgRx 应用程序中的状态和操作。它提供了一个可视化的界面，可以方便地查看状态的变化历史和当前状态，以及重放和调试操作。
安装
安装 @ngrx/devtools 非常简单，只需要在项目目录下执行以下命令：
npm install @ngrx/store-devtools --save-dev
建议将其作为开发依赖项，只在开发环境中使用。
配置
为了使用 @ngrx/devtools，我们需要在应用程序的根模块中配置 StoreDevtoolsModule，并将其添加到 StoreModule 的导入数组中。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- --------------
------ - ------------------- - ---- -----------------------
-- -- ------- - -------
------ - ------- - ---- -------------
------ - --------- - ---- ------------
----- ------- - ------------
-----------
-------- -
-----------------------------
--------------------------------
------- -- -- ---- -- -----
---
------------------------------
-
--
------ ----- --------- --当应用程序启动时，@ngrx/devtools 将自动连接到 Redux DevTools 扩展程序，并显示一个类似于下图的面板：
使用
现在，我们可以在 NgRx 应用程序中自由地探索状态的变化和操作历史。让我们假设有一个名为 counter 的状态属性，我们可以在控制台中输入以下代码来打印出其历史值：
(ng.store.devtools as any).select(state => state.counter).subscribe(console.log);
我们还可以使用 DevTools 中提供的调试工具来重放操作，并在开发过程中排查错误。
更多的使用示例，请参考官方文档：https://ngrx.io/guide/store-devtools
总结
@ngrx/devtools 为开发人员提供了一个强大而易于使用的工具，用于监视和调试 NgRx 应用程序中的状态和操作。通过在应用程序的根模块中配置 StoreDevtoolsModule，我们可以轻松地将其集成到应用程序中，并使用 DevTools 界面上的各种工具来提高开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e244898