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

Question

我在 Angular 中使用 NGRX 進行 state 管理。 NGRX 工作正常。 我也在使用本地存儲來保存 NGRX state 但它不起作用，當我在瀏覽器中刷新時，ngrx 數據重置為初始 state。 當我使用開發人員調試工具時，在轉到 Redux 部分后，我驗證了 ngrx 工作正常。 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.

應用程序.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

它可以通過執行以下更改來工作：

app.reducers.ts中缺少MetaReducer的東西。 在app.reducers.ts中添加這些行

 import { ActionReducerMap, combineReducers, MetaReducer } from '@ngrx/store'; export const metaReducers: MetaReducer<AppState>[] = [storeMetaReducers];

app.module.ts中缺少metaReducers的東西。 在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, }),