通过 ngrx select 检查对多个值的保护

Question

我有一个 canActivate ( guard )，我正在检查加载的变量以查看队列是否已加载。

但是我现在需要检查多个队列加载变量（布尔值）以查看它们是否已全部加载。那时我需要派遣行动。

canActivate(): Observable < boolean > {
  return this.checkStore().pipe(
    switchMap(() => of(true)),
    catchError(() => of(false))
  );
}

checkStore(): Observable < boolean > {
  //   Below are the additional booleans I need to check on
  //  this.store.select(fromStore.isFirstQueueLoaded);
  //  this.store.select(fromStore.isSecondQueueLoaded);
  //  this.store.select(fromStore.isThirdQueueLoaded);
  //  this.store.select(fromStore.isFourthQueueLoaded);
  //  this.store.select(fromStore.isFifthQueueLoaded);
  //  this.store.select(fromStore.isSixthQueueLoaded);
  //  this.store.select(fromStore.isSeventhQueueLoaded);


  return this.store.select(fromStore.isFirstQueueLoaded)
    // want to check for remaining queues loaded boolean val here
    .pipe(
      tap(loaded => {
        // need to check for loaded values of all queues
        if (!loaded) {
          this.dispatchActiontoStoreForAllQueue();
        }
      }),
      filter(loaded => loaded)
    );
}

dispatchActiontoStoreForAllQueue(): void {
  this.store.dispatch(new fromStore.LoadFirstQueue({}));
  this.store.dispatch(new fromStore.LoadSecondQueue({}));
  this.store.dispatch(new fromStore.LoadthirdQueue({}));
  this.store.dispatch(new fromStore.LoadFourthQueue({}));
  this.store.dispatch(new fromStore.LoadFifthQueue({}));
  this.store.dispatch(new fromStore.LoadSixthQueue({}));
  this.store.dispatch(new fromStore.LoadSeventhQueue({}));
}

我们如何组合所有这些 NGRX 选择（优化方法）来检查它们的布尔值并激活守卫？

Answer 1

我会创建一个 selector 而不是七个不同的。这看起来像：

export const fromStore = {
  areAllQueuesLoaded: createSelector(selectAppState, (state: AppState) => {
    return state.queue1.isLoaded &&
           state.queue2.isLoaded &&
           state.queue3.isLoaded &&
           state.queue4.isLoaded &&
           state.queue5.isLoaded &&
           state.queue6.isLoaded &&
           state.queue7.isLoaded;
  }),
}

然后在你的组件中你只需要一个 select:

return this.store.select(fromStore.areAllQueuesLoaded).subscribe(loaded => {   
    this.dispatchActiontoStoreForAllQueue();
});

通过 ngrx select 检查对多个值的保护

Check guard on multiple values via ngrx select

rxjs

ngrx

angular

ngrx-store

angular-guards