前言
@ngrx/store-log-monitor 是 @ngrx/store 中的一个插件，它允许我们使用类似 DevTools 的界面来调试 Redux 应用程序的状态。
安装
npm install @ngrx/store-log_monitor --save-dev
配置
当安装完成之后，在应用程序的根模块中导入 StoreLogMonitorModule 并添加到 imports 数组中：
-- -------------------- ---- -------
------ - ---------------------- ---------------------- - ---- --------------------------
-----------
-------- -
-- ---
------------------------------- --------- ------- --
--
---------- -
- -------- -------------------- --------- - ------- --- -------- ---------------------- - --
--
---------- --------------
--
------ ----- --------- - -我们将 StoreLogMonitorModule 添加到了 AppModule 中。StoreLogMonitorModule 接受一个可选配置项。在上面的示例中，我们指定了该插件的位置在页面的右边。请注意，在使用 StoreLogMonitorModule 前，要确保你已经使用 StoreDevtoolsModule 了。
使用
开发人员可以使用 @ngrx/store-devtools 唤起 log monitor 插件，并使用它来检查应用程序的状态和 action。
右键点击浏览器中 Redux DevTools 的图标，选择 Open Remote DevTools 并在弹出的 DevTools 中选择 Log Monitor 选项卡即可。
示例
-- -------------------- ---- -------
------ - ------------ ------ ------ - ---- --------------
------ - --------- - ---- ----------------
------ - -- -------------- ---- --------------------
------ - ---------- - ---- ------------------
------ - --- - ---- -----------------
------ - -- ----------- ---- --------------------
------------
--------- --------------
--------- -
------- --------------------------------
-------- ------ - ----- ---------
------- --------------------------------
--
--
------ ----- ---------------- -
------- -------------------
------------------- ------ ------------------------- -
----------- - -----------------------------------------
-
----------- -
----------------------- ----------------------------
-
----------- -
----------------------- ----------------------------
-
-CounterComponent 中使用了 store.pipe(select(fromCounter.getCount)) 来选择状态树中的 count 属性。该属性是来自 reducer 中的 state.counter 属性。通过这种方式，我们可以访问状态树中特定部分的数据。
总结
使用 @ngrx/store-log-monitor 插件是一种调试 Redux 应用程序状态的强大工具，它允许我们可视化状态树和调试 action。它易于使用，可以轻松从 Redux DevTools 插件中启动。以上就是使用该插件的一般教程，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24489a