NgRx Redux 开发工具不显示存储和状态详细信息，即使应用程序工作正常

Question

我正在使用下面的示例应用程序来学习angular+ngrx。 APM 示例 NgRx 应用程序

我已经安装了Redux Firefox扩展。但是每当我运行/重新加载应用程序时，redux 选项卡都会显示"未找到商店"消息。应用程序按预期工作(能够保留状态(。能够调度动作，在减速器中处理等。 请帮忙..我被困在了很长一段时间。

Answer 1

当Redux看不到您的Store时，Angular 应用程序存在问题

检查您是否有

StoreDevtoolsModule.instrument({maxAge: 25, logOnly: environment.production})

后

StoreModule.forRoot(reducers)

否则你就有麻烦了。

顺便说一句，最好安装 DevTools

ng add @ngrx/store-devtools

它将原理图添加到项目中。

Answer 2

要使用 Redux devtools，您必须安装 @ngrx/store-devtools 并将其导入AppModule- docs 中。

安装它：

npm install @ngrx/store-devtools --save 

导入：

@NgModule({
imports: [
StoreModule.forRoot(reducers),
// Instrumentation must be imported after importing StoreModule (config is optional)
StoreDevtoolsModule.instrument({
maxAge: 25, // Retains last 25 states
logOnly: environment.production, // Restrict extension to log-only mode
}),
],
})
export class AppModule {}

Answer 3

如果您安装了 @ngrx/store-devtools 并且商店仍未显示(相反，您看到未找到商店 - 等等等等说明(，则框架上的上下文菜单并选择重新加载帧。

其中一张票证声称不再需要这种解决方法，但对我来说是(Angular 并存储在 v.7.2.x 周围，Redux DevTools 扩展 2.17(

Answer 4

确保你已经安装了 ngrx/store-devtools 通过以下命令

npm install @ngrx/store-devtools --save

我想把我的两分钱的经验放在可能对你们中的许多人有帮助的地方。存在订单问题。你必须在化简器之后添加 ngrx/store-devtools。如果您不维护订单，它将不起作用。

Answer 5

调用仪器方法应用内模块来解决此错误。

例-

imports: [
BrowserModule,
AppRoutingModule,
// StoreModule.forRoot({}),
// StoreModule.forRoot(reducers, { metaReducers }),

StoreModule.forRoot({ count: counterReducer }),

// for debugging enable this instrument in development mode
**!environment.production ? StoreDevtoolsModule.instrument() : [],**

CustomerModule

],

Answer 6

我遇到了同样的问题...最后，我尝试在VSCode调试器之外运行我的应用程序，一切正常。不知何故，VSCode 中的调试器不允许你在 Devtools 中看到 Redux 选项卡