通过调用多个服务和操作正确映射 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