当页面重新加载时，ngrx 存储数据被刷新到初始状态答案

【问题标题】：When page reloads ngrx store data is refreshed to initial state当页面重新加载时，ngrx 存储数据被刷新到初始状态
【发布时间】：2019-11-07 09:10:56
【问题描述】：

如何在 Angular 7 中持久存储 ngrx 数据考虑以下场景

1.当我们登录时，我们将存储用户信息
2.当用户更新他的个人资料时，我们会发送一个更改，所有组件中的数据都会更新
3.这里的问题是当页面刷新发生时ngrx存储数据消失了如何解决这个问题

我的问题是制作一个资源并将该资源连接到所有所需的组件，当资源（数据）发生某些更改时，如何将更改反映到所有相关组件请帮助我如何实现这一目标

【问题讨论】：

标签： angular ngrx

【解决方案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],
    }),
  ],
  ...

其中keys代表reducer使用的keys： see documentation

【讨论】：

是状态键还是本地存储键
@VinitSingh github.com/btroncone/ngrx-store-localstorage#localstorageconfig ``` 键（必需）与本地存储同步的状态键。可以用两种不同的格式定义键： string[]：表示状态（reducer）键的字符串数组。将同步完整状态（例如 localStorageSync({keys: ['todos']})）。 ... ```

【解决方案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..
    }
  );
  });
 }
}

【讨论】：