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.

Olenolin

Both chrome and firefox extensions show 'pin: undefined' on launching the redux devtools – Olenolin

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

Shimmery

It's important to note that the order of the imports is important. StoreDevtoolsModule must be loaded after StoreModule. – Hyoscyamus

Answer 2

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.

Bantamweight

Thank you a lot. I just put the store dev tool above the StoreModule.forRoot. Silly me – Wallsend

@TonyNgo my problem also was the order of the store module and store devtools module , your comment helped me – Arlindaarline

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)

Ought

Answer 4

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.

Elfriedeelfstan

Answer 5

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

Bregma

Answer 6

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

Dkl