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

Question

I am using the below sample application to learn angular+ngrx. APM Sample NgRx App

I have installed Redux firefox extension. But whenever I run/reload application, redux tab shows 'No store found' message. The application is working as expected(is able to retain state). I am able to dispatch actions, handle it in the reducer etc.. Please help.. I am stuck in this for quite a long time.

Answer 1

There is an issue with Angular app when Redux doesn't see your Store

Check that you have

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

after

StoreModule.forRoot(reducers)

Otherwise you are in trouble.

BTW, it is better to install DevTools with

ng add @ngrx/store-devtools

It adds schematics to the project.

Answer 2

To use the Redux devtools you'll have to install @ngrx/store-devtools and import it in the AppModule - docs.

Install it with:

npm install @ngrx/store-devtools --save 

Import it with:

@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 {}