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

Question

如何在Angular 7中持续存储NGRX数据考虑以下情况

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

键代表REDUCER使用的键：请参阅文档

Answer 2

ngrx商店用于状态管理。最后，我们正在使用一个页面应用程序。在刷新页面上，包括NGRX商店在内的每个来源都将刷新。

在您的情况下，对于登录的用户，您将拥有cookie。

要保留用户信息，您只需要在将应用程序满载到浏览器上时仅一次。

为此，在app.module.ts中使用 APP_INITIALIZER提供商类似于下面的

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

session providerfactory.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..
    }
  );
  });
 }
}