根据服务器响应从 Effect 发送多个操作，在所有操作中使用 action.payload

Question

目前一个动作有效的是：

@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 在最后一个 switchMap 中是不可用的，因为我对 Effects 和 Observables 相当菜鸟，我对此很头疼。

这个运算符的正确组合是什么？

Answer 1

要访问 payload，请使用 this.assignmentDataService.addOrUpdateAssignment 的可观察管道中的最后一个 switchMap 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),
                                  ];
                          })             
             );
   })
);

希望对您有所帮助。

Answer 2

最终我只是通过在方程式中添加更多效果来解决这个问题。 - 第一效果发送服务器请求...响应发送 UpdateAssignmentSuccess 操作 - 第二个效果监听 UpdateAssignmentSuccess 并发送 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);
})
);

根据服务器响应从 Effect 发送多个操作，在所有操作中使用 action.payload

Sending multiple actions from Effect, on server response, using action.payload in all of them

rxjs

angular7

ngrx

ngrx-store

ngrx-effects