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

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

Answer 2

call instrument method in-app module to resolve this error.

Example-

 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 3

If you have @ngrx/store-devtools installed and the store still doesn't show up (instead, you see No store found - blah blah blah instructions), context menu over the frame and select Reload Frame.

One of the tickets claimed that this workaround should no longer be necessary, but to me it was (Angular and store around v.7.2.x, Redux DevTools extension 2.17)

Answer 4

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 5

I had the same problem... Then finally I tried running my app outside of VSCode debugger, and everything works fine. Somehow the debugger in VSCode doesn't allow you to see the Redux tab in Devtools

Answer 6

Make sure you have installed the ngrx/store-devtools by following commands

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.