Angular 2 redux 初始状态依赖于可以通过查询参数设置的 localStorage答案

【问题标题】：Angular 2 redux initial state relies on localStorage which can be set by query parametersAngular 2 redux 初始状态依赖于可以通过查询参数设置的 localStorage
【发布时间】：2017-06-28 04:40:19
【问题描述】：

带有 redux 设置的 Angular 2 应用程序，我必须设置应用程序，以便用户在返回导航时加载他们以前的设置。我还必须对其进行设置，以便用户可以使用查询参数链接应用程序的特定设置。我遇到的问题是redux存储的初始化在订阅查询参数之前从本地存储获取数据有机会做任何事情。

在获得设置查询参数所需的两个设置后运行可观察（始终在一起）

Observable.zip(this.accordionData$, this.apiSettings$).subscribe(data => {
  let accordionParam: string = encodeURIComponent(JSON.stringify(data[0]));
  let apiSettingsParam: string = encodeURIComponent(JSON.stringify(data[1]));
  this._router.navigate([''], { queryParams: { scope: apiSettingsParam, accordion: accordionParam }, relativeTo: this._route })
});

订阅应该设置状态的查询参数

this._route.queryParams.subscribe((params: Params) => {
  let scope = decodeURIComponent(params['scope']) !== 'undefined' ? decodeURIComponent(params['scope']): null;
  let accordion = decodeURIComponent(params['accordion']) !== 'undefined' ? decodeURIComponent(params['accordion']): null;
  if(scope){
    this.actions.updateAPISettings(JSON.parse(scope));
  }
  if(accordion){
    this.actions.updateAccordionData(JSON.parse(accordion));
  }
});

设置初始 api 设置的问题示例。

const initialAPISettings = JSON.parse(localStorage.getItem('scope')) || {
  'Scope': {
    'CountryList': [0],
    'DesignationList': [],
    'CustomIndex': {}
  }
};

为了澄清引导模块在构造函数中使用ngRedux.provideStore(store);，引导组件是订阅查询参数的地方。也许我需要在提供商店之前在模块构造函数中进行订阅。这种感觉就像是一种反模式。

所以我的问题归结为如何等待提供存储，直到检查了查询参数并设置了本地存储。

【问题讨论】：

我可能完全关闭了，因为我不确定我是否正确阅读了您的问题，但是您为什么不将您对 localStorage 的阅读投入使用，在阅读查询的同时从该服务获取数据参数，一旦你解决了结果 - 用值更新商店？

标签： angular redux

【解决方案1】：

你真正的初始状态不能有异步数据，因为它从一开始就不存在。

您希望有一个初始状态，表明仍在获取重要数据。例如initialDataFetched: bool = false。这将是您初始状态的一部分，以及您请求为 null 的数据（或您喜欢的任何数据）。

然后在您的应用程序的某个地方，您将开始从本地存储中检索您需要的数据。这可以由 redux 操作触发，也可以不触发。检索到数据后，将数据作为有效负载分派一个操作。然后，处理该操作的 reducer 会将数据合并到存储中，同时将标志 initialDataFetched 设置为 true。

同时，您可以不显示依赖于 localStorage 数据的任何内容，而是显示加载状态或什么都不显示（如果您的异步操作预计几乎是即时的）。

【讨论】：