Angular 如何在NgRx中从单一效果调度多个动作？

我当前的效果代码是这样的，这是我的效果代码，目前我从效果中发送单个动作。但是我想再发送一个action notificationNew（），我在下面的代码中对其进行了注释

    bookPropertyRequest$ = createEffect(() => {
    return this.actions$.pipe(
        ofType(ReservationReqActions.bookPropertyRequest),
        concatMap(action =>
            this.ReservationReqService.sendReservationRequest(action.reservationRequest).pipe(
                map(response => {
                    if (response.status) {
                        this.helperService.snackbar('Request Sent.');
                        // Here i want to dispatch another action - notificationNew()
                        return ReservationReqActions.bookPropertyRequestSuccess({ reservationRequest: response.result });
                    } else {
                        const errorCode = response.errorCode;
                        if (errorCode !== null) {
                            this.helperService.errorAlert('', response.message, 'error');
                            return ReservationReqActions.bookPropertyRequestFailure({
                                error: {
                                    type: response.errorCode || null,
                                    message: response.message
                                }
                            });
                        }
                    }
                }),
                catchError(error => EMPTY)
            )
        )
    );
});

Now I want to dispatch another action from action notificationNew() when the above-mentioned effect is success. So my my concern is how we can dispatch multiple actions from single effect.

---

那么如何实现这一点呢？

您可以使用

switchMap

来代替

map

操作符，以便能够返回一个

动作数组，该数组随后将发出每个动作：

。。。
此.ReservationReqService.sendReservationRequest（action.reservationRequest）.pipe(
开关映射（响应=>{
如果（响应状态）{
this.helperService.snackbar（'Request Sent'）；
返回[
ReservationReqActions.bookPropertyRequestSuccess（{reservationRequest:response.result}），
UiActions.notificationNew（{…}）
]
...

建议
下面是一个用更少代码进行重构的建议：

bookPropertyRequest$=createEffect（（）=>this.actions$.pipe(
类型（ReservationReqActions.bookPropertyRequest），
concatMap（操作=>
此.reservationReqService.sendReservationRequest（action.reservationRequest）.pipe(
开关映射（响应=>[
ReservationReqActions.bookPropertyRequestSuccess（{reservationRequest:response.result}），
UiActions.notificationNew（{…}）
]),
catchError（errorResponse=>[
ReservationReqActions.bookPropertyRequestFailure({
错误：errorResponse.error
}),
UiActions.errorAlert（errorResponse.error.message）；
])
)
);
));

为此，您需要在
sendReservationRequest
方法中使用
HttpClient
返回“经典”响应：

sendReservationRequest（请求：ReservationRequest）{
返回此.httpClient.post（服务URL）；
//这里没有{观察：'响应'}
}

注意：在本例中非常简单，但在某些情况下可能需要测试
errorResponse
中的
catchError
内容。以避免出现
errorResponse.error.message
…的任何问题。
您可以使用
switchMap
代替
map
操作符，to能够返回动作的
数组
，然后该数组将发出每个动作：

。。。
此.ReservationReqService.sendReservationRequest（action.reservationRequest）.pipe(
开关映射（响应=>{
如果（响应状态）{
this.helperService.snackbar（'Request Sent'）；
返回[
ReservationReqActions.bookPropertyRequestSuccess（{reservationRequest:response.result}），
UiActions.notificationNew（{…}）
]
...

建议
下面是一个用更少代码进行重构的建议：

bookPropertyRequest$=createEffect（（）=>this.actions$.pipe(
类型（ReservationReqActions.bookPropertyRequest），
concatMap（操作=>
此.reservationReqService.sendReservationRequest（action.reservationRequest）.pipe(
开关映射（响应=>[
ReservationReqActions.bookPropertyRequestSuccess（{reservationRequest:response.result}），
UiActions.notificationNew（{…}）
]),
catchError（errorResponse=>[
ReservationReqActions.bookPropertyRequestFailure({
错误：errorResponse.error
}),
UiActions.errorAlert（errorResponse.error.message）；
])
)
);
));

为此，您需要在
sendReservationRequest
方法中使用
HttpClient
返回“经典”响应：

sendReservationRequest（请求：ReservationRequest）{
返回此.httpClient.post（服务URL）；
//这里没有{观察：'响应'}
}

注意：在本例中非常简单，但在某些情况下可能需要测试
errorResponse
中的
catchError
内容。以避免出现
errorResponse.error.message
…的任何问题。我解决此类问题的另一个效果是过滤成功行动：

    notificationNew$ = createEffect(() => {
      return this.actions$.pipe(
        ofType(ReservationReqActions.bookPropertyRequestSuccess),
        map((action)=> ReservationReqActions.notificationNew(action.payload) )

因此，它的结构清晰，代码也不太复杂。
我解决此类问题的另一个效果是，我过滤成功操作：

    notificationNew$ = createEffect(() => {
      return this.actions$.pipe(
        ofType(ReservationReqActions.bookPropertyRequestSuccess),
        map((action)=> ReservationReqActions.notificationNew(action.payload) )

因此，它的结构清晰，代码也不太复杂。
这能回答您的问题吗？这能回答您的问题吗？