Проверьте защиту на нескольких значениях с помощью ngrx select - PullRequest
0 голосов
/ 28 июня 2018

У меня есть 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 (оптимизированный подход), чтобы проверить их логические значения и активировать охрану?

1 Ответ

0 голосов
/ 28 июня 2018

Я бы создал один селектор вместо семи разных. Это будет выглядеть примерно так:

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

И тогда в вашем компоненте вам нужен только один выбор:

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