How can I access the ngrx store in the console?

Question

I know it's a bit of no-no but in my browsers console, how can I access the ngrx redux store? The redux tooling obviously does it but I just want to be able to examine it via the console. Is it a global? If so, what is it's name? Thanks.

Answer 1

I think (and hope) that it will not work without explicit exposure in the application.

You can make a function globally available that reads the current state and shows it in the console. Like this:

  @NgModule({
    declarations: [...],
    imports: [...],
    bootstrap: [...],
  })
  export class AppModule {
    public constructor(private store: Store<unknown>) {
      this.exposeStoreToGlobal();
    }

    public exposeStoreToGlobal() {
      if (!environment.production) {
        globalThis.showStoreSnapshot = () => {
          this.store.pipe(first()).subscribe((snapshot) => console.log(snapshot));
        };
      }
    }
  }

Then you just have to call it in the console whenever you want to: