通过调用多个服务和操作正确映射ngrx的效果

Question

我有多个效果并试图将它们组合成一个，因为单独调度动作时存在问题。在检查第一次服务调用返回的值后，我试图按顺序执行。我有以下三种不同的效果：

@Effect()
loadNqInclDResponse$ = 
  this.actions.ofType(fromActions.LOAD_NQINCLD_RESPONSE).pipe(
    switchMap(() => {
      return this.cinReuseService.WmsInCl().pipe(
        map(responseNqinclD => new 
          fromActions.LoadNqInclDResponseSuccess(responseNqinclD)),
        catchError(error => {
          const err: responseNqinclD = {
            httpStatus: "FALSE",
            message: "ERROR"
          };
          return of(new fromActions.LoadNqInclDResponseFail(err));
        })
      );  
    })
  );


@Effect()
loadCinReuseService$ = 
  this.actions.ofType(fromActions.LOAD_CIN_REUSE_SERVICE).pipe(
    switchMap(() => {
      return this.cinReuseService.cinReuseServiceCall().pipe(
        map(responseReuseService => new 
          fromActions.LoadCinReuseServiceSuccess(responseReuseService)),
        catchError(error => {
          const err: responseReuseService = {
            status: "FALSE",
            message: "ERROR"
          }
          return of(new fromActions.LoadCinReuseServiceFail(err))
        })
      );
    })
  )

@Effect()
loadCaseReuseService$ = 
  this.actions.ofType(fromActions.LOAD_CASE_REUSE_SERVICE).pipe(
    switchMap(() => {
      return this.cinReuseService.caseReuseServiceCall().pipe(
        map(responseReuseService => new fromActions.LoadCaseReuseServiceSuccess(responseReuseService)),
        catchError(error => {
          const err: responseReuseService = {
            status: "FALSE",
            message: "ERROR"
          };

          return of(new fromActions.LoadCaseReuseFail(err));
        });
      )
    });

);

我预计单个效果如下：

@Effect()
loadNqInclDResponse1$ = 
  this.actions.ofType(fromActions.LOAD_NQINCLD_RESPONSE).pipe(
    switchMap(() => {
      return this.cinReuseService.WmsInCl().pipe(
        map(nqinclD => {        
          // new fromActions.LoadNqInclDResponseSuccess(nqinclD);
          if (nqinclD.httpStatus === '200') {
            switchMap(() => {
              return this.cinReuseService.cinReuseServiceCall().pipe(
                map(cin => new fromActions.LoadCinReuseServiceSuccess(cin)));
            }),
            switchMap(() => {
              return this.cinReuseService.caseReuseServiceCall().pipe(
                map(cse => new fromActions.LoadCaseReuseServiceSuccess(cse)));
            })
          }
        }),
        catchError(error => {
          let err: responseNqinclD = {
            httpStatus: "FALSE",
            message: "ERROR"
          };
          return of(new fromActions.LoadNqInclDResponseFail(err))
        })
      )
    })
  )
}

在单击按钮时，我在调度 fromActions.LOAD_CIN_REUSE_SERVICE 时收到如下错误：

错误：效果“CinReuseEffect.loadNqInclDResponse1$”调度了一个无效动作：未定义

TypeError:动作必须是对象

服务调用 wmsInCl() 目前有以下代码用于测试目的：

WmsInCl(): Observable<responseNqinclD> {
  var body: Body;
  var response: responseNqinclD;
  console.log("1111111" + body);
   response = {
    httpStatus: "200",
    message: "SUCCESS"
  }
  console.log(response);
  return of(response);
 }
}

提前谢谢你！

Answer 1

试试这个：

@Effect()
loadNqInclDResponse1$ = 
  this.actions.ofType(fromActions.LOAD_NQINCLD_RESPONSE).pipe(
    switchMap(() => this.cinReuseService.WmsInCl()),
    switchMap((nqinclD) => {
      if(nqinclD.httpStatus === '200') {
        return combineLatest([
          of(nqinclD),
          this.cinReuseService.cinReuseServiceCall(),
          this.cinReuseService.caseReuseServiceCall()
        ]);
      }
      const err: any = {
        httpStatus: "FALSE",
        message: "ERROR"
      };
      return of(err);
    }),
    switchMap(value => {
      if(Array.isArray(value)) {
        const [nqinclD,cin,cse] = value;
        return [
          new fromActions.LoadNqInclDResponseSuccess(nqinclD),
          new fromActions.LoadCinReuseServiceSuccess(cin),
          new fromActions.LoadCaseReuseServiceSuccess(cse),
        ];
      }

      return [
        new fromActions.LoadNqInclDResponseFail(value),
        new fromActions.LoadCinReuseServiceFail(value),
        new fromActions.LoadCaseReuseFail(value)
      ];
    }),
    catchError(error => {
      const value = {
        httpStatus: "FALSE",
        message: "ERROR"
      };
      return from([
        new fromActions.LoadNqInclDResponseFail(value),
        new fromActions.LoadCinReuseServiceFail(value),
        new fromActions.LoadCaseReuseFail(value)
      ]);
    })
  );

switchMap 有一个有用的行为：当它返回一个值数组时，它会在内部将数组的元素转换为单独的 observable（数组的每个元素对应一个 observable），如下所示：

of(1).pipe(switchMap((_) => [1,2,3]).subscribe(console.log);
// 1
// 2 
// 3