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

Question

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

我已经安装了 Redux firefox 扩展。但是每当我 run/reload 应用程序时，redux 选项卡都会显示 'No store found' 消息。该应用程序按预期工作（能够保留状态）。我能够分派动作，在减速器中处理它等。请帮忙..我被困了很长时间。

Answer 1

要使用 Redux 开发工具，您必须安装 @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 2

如果您安装了@ngrx/store-devtools，但商店仍然没有显示（相反，您会看到 找不到商店 - blah blah blah 说明)，框架上的上下文菜单和 select 重新加载框架。

其中一张票声称不再需要此解决方法，但对我来说它是（Angular 并存储在 v.7 周围。2.x，Redux DevTools 扩展 2.17）

Answer 3

当 Redux 没有看到您的 Store

时，Angular 应用出现问题

检查你有

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

之后

StoreModule.forRoot(reducers)

不然就麻烦了

顺便说一句，最好用

安装DevTools

ng add @ngrx/store-devtools

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

Answer 4

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

npm install @ngrx/store-devtools --save

I want to put my two-cent experience that might be helpful for many of you. There is an order issue. You have to the add ngrx/store-devtools after the reducer. If you do not maintain the order, it will not work.

Answer 5

调用 instrument 方法在应用程序模块中解决此错误。

示例-

 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
    
      ],

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

NgRx Redux devtools not showing store and state details even though applicaton is working fine

typescript

redux

ngrx

redux-devtools-extension

angular