通过调用多个服务和操作正确映射 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$" 调度了一个无效的操作：未定义

类型错误：动作必须是对象

服务调用 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

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

Correctly mapping in effect of ngrx by calling multiple services and actions

ngrx

ngrx-effects

angular

ngrx-store