在路由器防护中使用 NGRX

Question

使用 NGRX 进行复杂的初始化需要一些帮助

我正在为我的一条路线使用 CanActivate 保护，以确保使用组件的必要数据初始化我的 NGRX 存储。 我正在关注这篇文章中的示例（ https://stackoverflow.com/a/48652379/1568482 ）并以此为基础进行构建。

这是我的 CanActivate Guard 的逻辑

  outputGrp$ = this.store.pipe(select(selectOutputGroup));
  inputGrp$ = this.store.pipe(select(selectInputGroup));
-----------------------------------------
return <Observable<boolean>>this.store.select(selectGroupsLoaded).pipe(
      map(loaded => {
        if(!loaded)
          this.store.dispatch(loadMainCanvas());
        return loaded;
      }),
      filter(loaded => !!loaded),
      take(1),
      withLatestFrom(this.outputGrp$), //Get Output Group ID
      tap(([loaded, og]) => this.outputGroupId = <string>og?.id),
      filter(loaded => !!loaded),
      take(1),
      map((data) => data[0]),
      withLatestFrom(this.inputGrp$), //Get Input Group ID
      tap(([loaded, ig]) => this.inputGroupId = <string>ig?.id),
      filter(([loaded, ig]) => !!loaded),
      take(1),
      //THIS NEVER GETS EVALUATED AGAIN AFTER STORE IS UPDATED FROM CALL BELOW!!!
      withLatestFrom(this.store.select(selectInputGroupProcessorsLoaded)), //See if Input Group Processors Loaded
      map(([l1, loaded]) => {
        if(!loaded)
          this.store.dispatch(loadProcessorsForGroup({groupId: this.inputGroupId, groupType: 'input'}));
        return loaded;
      }),
      filter(loaded =>!!loaded),
      take(1),
      // GET: ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence
}

在我的商店中，我存储了 boolean 值，用于我想测试的每件事，以查看数据是否已加载。 我在警卫中评估这些值，如果它们没有加载，我会发送一个调用来检索数据并更新存储。

加载“主画布”项目后，我会继续并在此处检索一些必要的数据以供将来调用（groupIds）。 该数据加载，我能够使用必要的数据设置变量。

当我到达withLatestFrom(this.store.select(selectInputGroupProcessorsLoaded))它评估为 FALSE 并落入map() function。 在那里，商店调度调用以检索数据并且商店成功更新，但是...... selectInputGroupProcessorsLoaded似乎没有改变，导致重新评估语句。

我还有几个像这样的部分，它们都以同样的方式失败。

Answer 1

因此，将withLatestFrom切换为switchMap解决了我的问题！