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

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

页面重新加载时，ngrx存储数据将刷新为初始状态

2 个答案: