通过调用多个服务和操作正确地映射为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有一个有用的行为：当它返回一个值数组时，它会在内部将数组的元素转换为单个可观察值（对于数组的每个元素都可以观察到），如下所示：

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