ngrx - убедитесь, что все http-звонки сделаны и хранятся в магазине

Question

Краткое резюме того, что я хочу

• Позвоните в API 1
• Позвони в API 2
• Подождите, пока эти данные не будут сохранены в store
• Получить эти данные через на уровне effect

Описание

Что я хотел бы сделать, так это просто подождать, пока некоторые действия не будут должным образом завершены и сохранены в магазине. А потом беги следующий.

Например,

@Effect()
  getData1$: Observable<Action> = this.actions$.pipe(
    ofType(AuthActionTypes.getData1Action),
    switchMap(action => {  // Simply call an api and save data in the store by calling GetData1Success.
      this.httpClient.get(...)
      .pipe(
        map((result) => new GetData1Success(result))
      )
    })
  );

@Effect()
  someEffect$: Observable<Action> = this.actions$.pipe(
    ofType(AuthActionTypes.UserLogIn),
    flatMap(_ => {  // get first data
      this.store.dispatch(new getData1());
      return of(_);
    }),
    flatMap(_ => {  // get second data
      this.store.dispatch(new getData2());
      return of(_);
    }),
    switchMap(action => { // run final action
      return [new finalAction()];
    }),
    catchError(() => of(new finalActionFailure()))
  );

И затем finalAction() выполняется,

@Effect()
  finalEffect$: Observable<Action> = this.actions$.pipe(
    ofType(AuthActionTypes.FinalActionAction),
    switchMap(action => {
      this.store.pipe(select(fromData.data1)).subscribe(data1 => {this.data1 = data1});
      this.store.pipe(select(fromData.data2)).subscribe(data1 => {this.data2 = data2});

  // this.data1, this.data2 are empty...

      return [new finalAction()];
    })
  );

В someEffect$ и getData1, и getData2 вызывают запрос http и сохраняют, когда вызов http успешно выполнен.

Проблема в том, что он не ждет, пока данные будут сохранены в хранилище. И только finalAction выполняется.

Я понимаю почему, потому что flatMap дождитесь окончания getData1. Но не GetData1Success.

В этом случае, как я могу правильно получить данные из хранилища на момент finalEffect$?

Спасибо.

РЕДАКТИРОВАТЬ 1: я уже пытался использовать forkJoin. Но я понятия не имею, как ловить данные, когда они хранятся в магазине.

Answer 1

Я мог бы решить, используя forkJoin. Но не уверен, что это чистый способ.

Дайте мне знать ваше мнение.

Итак, мое решение заключалось в изменении второго кода из приведенного выше.

@Effect()
  someEffect$: Observable<Action> = this.actions$.pipe(
    ofType(AuthActionTypes.UserLogIn),
    switchMap(_ => {
      const data1 = this.httpClient.get(...);
      const data2 = this.httpClient.get(...);

      return forkJoin(data1, data2).pipe(
        tap(
         result => {
          // Here update data to the store.
          this.store.dispatch(GetData1Success(result[0]));
          this.store.dispatch(GetData2Success(result[1]));
         }

        )
      )

    }),
    switchMap(action => { // run final action
      return [new finalAction()];
    }),
    catchError(() => of(new finalActionFailure()))
  );

У меня уже есть действие под названием GetData1, которое получает данные1, но я не смог использовать это действие в моем случае, потому что не знаю, как поймать момент, когда данные1 сохраняются в store.

И в конечном итоге использовал forkJoin с вызовом http-запроса вручную в switchMap.