将ReduxDevTools与ngrx/store一起使用

Redux DevTools 扩展是一个非常流行的工具，用于可视化应用程序的 Redux 状态树并对其执行操作。 值得庆幸的是，由于 ngrx/store-devtools，它还可以与使用 ngrx/store 进行状态管理的 Angular 2+ 项目一起使用。

首先安装 Redux DevTools 扩展本身。 如果您使用的是 Chrome，最简单的方法是通过 Chrome 网上商店。 和 here 用于 Firefox 版本。 安装扩展程序后，当您在 Redux 驱动的应用程序中工作时，您将在浏览器的 DevTools 中看到一个可用的新选项卡。

然后使用 Yarn 或 npm 安装 @ngrx/store-devtools：

$ yarn add @ngrx/store-devtools

# or:
$ npm install @ngrx/store-devtools --save

---

最后，在您的应用模块中，导入 StoreDevtoolsModule 并将其添加到 NgModule 的导入中：

app.module.ts

// ...

import { StoreModule } from '@ngrx/store';
import { todoReducer } from './reducers/todo.reducer';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

maxAge 配置是可选的，有助于限制 DevTools 中保存的操作数量。

✨ 就是这样！ 您已准备好开始在您的 ngrx/store 项目中使用 Redux DevTools。

您可以跳过动作、可视化动作和状态或导入/导出当前状态树：

您甚至可以直接从扩展中调度操作：