Rxjs 在服务器响应上使用action.payload从Effect发送多个操作

当前使用一个操作的功能：

@Effect()
addAssignment$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.AddAssignment),
exhaustMap((action) => {
        return this.assignmentDataService.addOrUpdateAssignment([action.payload]).pipe(
            map((assignment) => {
                return new assignmentActions.AddAssignmentSuccess(assignment);
            })
        );
    }));

我如何尝试重构它：

@Effect()
updateAssignment$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.UpdateAssignment),
map((action) => {
  return action.payload;
}),
switchMap((payload) => {
  return this.assignmentDataService.addOrUpdateAssignment([payload.postData]);
}),
switchMap((res) => {
  return [
    new assignmentActions.LastUpdatedAssignmentPost(action.payload.postData),
    new assignmentActions.LastUpdatedAssignment(action.payload.mergedData),
    new assignmentActions.UpdateAssignmentSuccess(action.payload.mergedData),
  ];
})
);

当然，action.payload.mergedData&action.payload.postData在上一次的切换图中是不可用的，因为我不知道效果和可观察到的东西，所以我对此感到非常震惊

---

在这个问题上，运营商的正确组合是什么

要访问

有效负载

，请使用

this.assignmentDataService.addOrUpdateAssignment

API返回的可观察管道中的最后一个

开关映射

，如下所示：

@Effect()
updateAssignment$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.UpdateAssignment),
map((action) => {
  return action.payload;
}),
switchMap((payload) => {
  return this.assignmentDataService.addOrUpdateAssignment([payload.postData])
             .pipe(
                switchMap((res) => {
                           return [
                                    new assignmentActions.LastUpdatedAssignmentPost(payload.postData),
                                    new assignmentActions.LastUpdatedAssignment(payload.mergedData),
                                    new assignmentActions.UpdateAssignmentSuccess(payload.mergedData),
                                  ];
                          })             
             );
   })
);

---

希望能有帮助。

最后，我只是通过在等式中添加更多效果来解决这个问题。 -第一个效果发送服务器请求。。。响应时发送UpdateAssignmentSuccess操作 -第二个效果侦听UpdatesSignmentSuccess并发送LastUpdatedAssignmentPost操作 -第三个效果侦听LastUpdatedAssignmentPost操作并发送LastUpdatedAssignment操作

@Effect()
updateAssignment$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.UpdateAssignment),
exhaustMap((action) => {
        return this.assignmentDataService.addOrUpdateAssignment([action.payload.postData]).pipe(
            map((assignment) => {
                return new assignmentActions.UpdateAssignmentSuccess(action.payload);
            })
        );
    }),
    catchError(() => {
      return of({
        type: assignmentActions.AssignmentsActionTypes.UpdateAssignmentFailure,
        payload: true
      });
    })
);

@Effect()
updateAssignmentsSuccess$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.UpdateAssignmentSuccess),
map((action:any) => {
  return new assignmentActions.LastUpdatedAssignmentPost(action.payload);
})
);

@Effect()
lastUpdateAssignmentsPost$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.LastUpdatedAssignmentPost),
map((action:any) => {
  return new assignmentActions.LastUpdatedAssignment(action.payload);
})
);

---

我不认为把它分成多个效果是最好的解决办法。看看user2216584s的想法