通过管道通过另一个API调用处理NgRx Effect中的数据

Question

我正在尝试使用NgRx效果处理从第一个API调用返回的数据。

  fetchPages$ = createEffect(() =>
    this._actions$.pipe(
      ofType(FETCH_PAGES),
      switchMap(() => this._confApi.getPages()
        .pipe(
          map(pages => {
            pages.forEach(page => {
              this._confApi.getPageVersion(page.url).pipe(map(version => page.version = version));
            });
            return pages;
          }),
          map(pages => SAVE_PAGES({pages}))
        )
      )
    )
  );

但是在这种情况下，甚至没有调用第一个映射中的API调用。我也尝试过这种方式：

  fetchPages$ = createEffect(() =>
    this._actions$.pipe(
      ofType(FETCH_PAGES),
      switchMap(() => this._confApi.getPages()
        .pipe(
          map(pages => {
            pages.forEach(page => {
              this._confApi.getPageVersion(page.url).subscribe(version => page.version = version);
            });
            return pages;
          }),
          map(pages => SAVE_PAGES({pages}))
        )
      )
    )
  );

并且在执行调用时，该值不会添加到页面属性（映射到SAVE_PAGES实际上不会等待）。

解决此问题的正确方法是什么？

Answer 1

您缺少forkJoin，等待所有getPageVersion可观察物完成。

您可能想要类似的东西

  fetchPages$ = createEffect(() =>
    this._actions$.pipe(
      ofType(FETCH_PAGES),
      switchMap(() => this._confApi.getPages()),
      switchMap(pages => {
        return forkJoin(pages.map(page => this._confApi.getPageVersion(page.url))).pipe(
          map(versions => {
            versions.forEach(version => page.version = version);
            return page;
          })
        );
      }),
      map(pages => SAVE_PAGES({ pages }))
    )
  );