在 Angular NGRX Effect 中链接两个 API 调用答案

【问题标题】：Chaining two API calls in Angular NGRX Effect在 Angular NGRX Effect 中链接两个 API 调用
【发布时间】：2020-11-18 02:52:58
【问题描述】：

我正在尝试解决一个小问题，但无法解决。我有一个用有效载荷调用的效果。我需要为结果调用 API，然后将该结果和有效负载传递给另一个 API。到目前为止，我尝试过的内容如下，它说动作应该返回一个类型，所以它不起作用。

  @Effect()
  fetchSomething$ = this.actions
    .ofType(fromProfileAction.FETCH_POST)
    .map(action => action)
    .switchMap(payload => Observable.forkJoin([
      Observable.of(payload),
      this.xyzService.getXyz()
    ]))
    .switchMap(data => {
      const [action, xyz] = data;
      return this.postsService
          .abc(action.payload)
          .pipe(
            map(async (response: any) => {
              if (response.res) {
                const result = res.name + " - " + Xyz;
                action.payload.result = result;
              }
              return new fromProfileAction.FetchPostSuccess(action.payload);
            }),
            catchError(err => of(new fromProfileAction.FetchPostFailure({ err })))
          );
    });

任何指向正确方向的指针。

【问题讨论】：

new fromProfileAction.FetchPostSuccess(action);

标签： angular typescript ngrx ngrx-effects

【解决方案1】：

你也可以这样做

@Injectable()
export class SomeEffects {

  someAction$ = createEffect(() =>
    this.actions$.pipe(
      ofType(someEvent),
      exhaustMap((action) =>
        this.service1.get(action.someID).pipe(
          map((someObject) => someObjectLoaded({ someObject})),
        )
      )
    )
  );

  someObjectLoaded$ = createEffect(() =>
    this.actions$.pipe(
      ofType(someObjectLoaded),
      exhaustMap((action) => this.service2.get(action.someObject.someOtherID)
        .pipe(map((someOtherObject) => someOtherObjectLoaded({ someOtherObject} )))
      )
    )
  );

  constructor(
    private actions$: Actions,
    private service1: Service1,
    private service2: Service2
  ) {
  }
}

【讨论】：

【解决方案2】：

@Effect() fetchSomething$ = this.actions .ofType(fromProfileAction.FETCH_POST) .map(action => action) .switchMap(payload => return  Observable.forkJoin([ Observable.of(payload), this.xyzService.getXyz() ])) .switchMap(data => { const [action, xyz] = data; return this.postsService .abc(action.payload) .pipe( map(async (response: any) => { if (response.res) { const result = res.name + " - " + Xyz; action.payload.result = result; } return new fromProfileAction.FetchPostSuccess(action.payload); }), catchError(err => of(new fromProfileAction.FetchPostFailure({ err }))) ); });

试试 abpve 代码。您必须在第一个 switch 映射中返回结果。

【讨论】：

【解决方案3】：

fetchSomething$ = this.actions
    .ofType(fromProfileAction.FETCH_POST)
    .map(action => action.payload)
    .switchMap(payload => this.xyzService.getXyz(payload)))
    .switchMap(data => {      
      return this.postsService
          .abc(data)
          .pipe(
            map(async (response: any) => {
              if (response.res) {
                const result = res.name + " - " + Xyz;
                action.payload.result = result;
              }
              return new fromProfileAction.FetchPostSuccess(action.payload);
            }),
            catchError(err => of(new fromProfileAction.FetchPostFailure({ err })))
          );
    });

【讨论】：