Search code examples
angularngrx-store

How to add meta reducers to ngrx store in a standalone application?


During Angular (v15) bootstrap, how should meta reducers be added to a standalone app?

Say I start with:

bootstrapApplication(AppComponent, {
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    ...
    provideStore(reducers, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
        strictStateSerializability: true,
        strictActionSerializability: true,
        strictActionWithinNgZone: true,
        strictActionTypeUniqueness: true
      }
    }),
    ...
  ]
}).catch(error => console.log('Bootstrap error', error));

The provideStore function doesn't seem to accept a metaReducers parameter (unless I'm missing something). I tried adding metaReducers using the module approach via importProvidersFrom (see below), but the meta reducers never run:

bootstrapApplication(AppComponent, {
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    ...
    importProvidersFrom(StoreModule.forRoot(undefined, { metaReducers })),
    provideStore(reducers, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
        strictStateSerializability: true,
        strictActionSerializability: true,
        strictActionWithinNgZone: true,
        strictActionTypeUniqueness: true
      }
    }),
    ...
  ]
}).catch(error => console.log('Bootstrap error', error));

I'm not finding anything in the NGRX (v15-v17) docs, nor via google / stack overflow search.


Solution

  • According to the options docs the provideStore function does support adding metaReducers next to theruntimeChecks attribute:

    provideStore(reducers, {
      runtimeChecks: {},
      metaReducers: , // <--- Meta reducers here
    })