在路由器防護中使用 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解決了我的問題！