本地存储未在 Angular 中保存 NGRX state

Question

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

Answer 1

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, }),