При перезагрузке страницы данные хранилища ngrx обновляются до исходного состояния.

Question

Как хранить данные ngrx постоянно в угловом формате 7. Рассмотрим следующий сценарий

1. При входе в систему мы будем хранить информацию о пользователе
2. Когда пользователь обновляет свой профиль, мы отправляем изменение, и данные будутобновляться во всех компонентах
3. Здесь проблема заключается в том, что когда происходит обновление страницы, данные хранилища ngrx исчезают, как решить эту проблему

Моя проблема состоит в том, чтобы создать один ресурс и подключить этот ресурс ко всем требуемым компонентам икогда происходит какое-то изменение с ресурсами (данными), как отразить изменение для всех связанных компонентов, пожалуйста, помогите мне, как этого достичь

Answer 1

Используйте ngrx-store-localstorage , например, вот так:

import { StoreModule } from '@ngrx/store';
import { localStorageSync } from 'ngrx-store-localstorage';

export function localStorageSyncReducer(rootReducer: any) {
    return localStorageSync({ keys: ['what', 'keys', 'do', 'you', 'want', 'to', 'store'], rehydrate: true })(rootReducer);
}

@NgModule({
  imports: [
    StoreModule.forRoot(reducer, {
      metaReducers: [..., localStorageSyncReducer],
    }),
  ],
  ...

Answer 2

Магазин ngrx предназначен для управления состоянием.В итоге мы используем одностраничное приложение.При обновлении страницы каждый источник, включая хранилище ngrx, будет обновлен.

В вашем случае для вошедшего в систему пользователя у вас будет файл cookie.

Чтобы сохранить информацию о пользователе, вам необходимозапрашивайте свой сервер только один раз, когда приложение полностью загружено в браузере.

Для этого в app.module.ts используйте APP_INITIALIZER провайдера, что-то вроде ниже,

providers: [
  ...
   SessionProvider,
   { provide: APP_INITIALIZER, useFactory: sessionProviderFactory, deps: [SessionProvider], multi: true },
  ...
]

SessionProviderFactory.ts

export function sessionProviderFactory(provider: SessionProvider) {
 return () => provider.load();
}

SessionProvider.ts

@Injectable()
export class SessionProvider {
 constructor(private httpClient: HttpClient, private store: Store<AppState>) { }

  load(): Promise<boolean> {
  return new Promise<boolean>((resolve, reject) => {
  this.httpClient.get('/rest/v1/user').subscribe(
    (res: UserModel) => {
      // in this step, store the value in the ngRx store
      this.store.dispatch(new Login(res));
      resolve(true);
    },
    (error) => {
      //error handling..
    }
  );
  });
 }
}