Local storage is not saving the NGRX state in Angular

July 1, 2022

I am using NGRX for state management in Angular. NGRX is working fine. I am also using local storage to save the NGRX state but it is not working, when I do refresh in the browser then ngrx data reset to initial state. And when I use developer debugging tool then after going to Redux section I verified it that ngrx is working fine. But when I go the developer debugging tool Application section and when I see the app state in its initial state and after deleting the state from there and doing refresh, it does not show app state.

app.reducers.ts

import { ActionReducerMap, combineReducers } from '@ngrx/store';

import { PointReducers } from '../point/shared/store/point.reducers';
import { AppState } from './app.state';

export const appReducers: ActionReducerMap<AppState> = {
  cashPoint: combineReducers({
    closingTab: PointReducers.closingTab,
    configTab: PointReducers.configTab,
    departTab: PointReducers.departTab,
  })
};

store.reducers.ts

import { Action, ActionReducer } from '@ngrx/store';

import { LocalStorageConstants } from '../shared/constants/local-storage.constants';
import { AppState } from './app.state';

export function storeMetaReducers(reducer: ActionReducer<any>) {
  return function (state: AppState | undefined, action: Action) {
    if (state === undefined) {
      const persisted = localStorage.getItem(LocalStorageConstants.AppState);
      return persisted ? JSON.parse(persisted) : reducer(state, action);
    }

    const newState = reducer(state, action);

    localStorage.setItem(LocalStorageConstants.AppState, JSON.stringify(newState));
    return newState;
  };
}

app.module.ts

import { APP_BASE_HREF } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-translate/core';

import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';

import { PointModule } from '../../../app/src/lib/components/app/point/point.module';
import { createTranslateLoader } from '../../../app/lib/components/app/point/shared/helpers/helpers';
import { appReducers } from '../../../app/lib/components/app/store/app.reducers';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: TranslateMessageFormatCompiler
      }
    }),

    AppRoutingModule,
    CashPointModule,

    StoreModule.forRoot(appReducers, {
      runtimeChecks: {
        strictStateImmutability: false,
        strictActionImmutability: false,
        strictStateSerializability: false,
        strictActionSerializability: false
      }
    }),
    EffectsModule.forRoot([]),

    StoreDevtoolsModule.instrument({
      maxAge: 50
    }),
  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '/'
    }
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
export class AppModule {}

>Solution :

It can work by doing the following changes:

MetaReducer stuff is missing in app.reducers.ts. Add these lines in app.reducers.ts

import { ActionReducerMap, combineReducers, MetaReducer } from '@ngrx/store';


export const metaReducers: MetaReducer<AppState>[] = [storeMetaReducers];

metaReducers stuff is missing in app.module.ts. Add these lines in app.module.ts

import { appReducers, metaReducers } from '../../../cashbook-lib/src/lib/components/app/store/app.reducers';


//Add metaReducers in  StoreModule.forRoot
 StoreModule.forRoot(appReducers, {
     metaReducers,
 }),