如何从 NgRx 中的单个效果调度多个操作？

Question

我当前的效果代码如下所示，这是我的效果代码，其中当前我正在从效果中分派单个操作。但我想再发送一个操作 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.

那么如何实现这一目标呢？

Answer 1

您可以使用switchMapin 代替map运算符，以便能够返回 ofarray操作，然后该操作将发出每个操作：

... 
this.ReservationReqService.sendReservationRequest(action.reservationRequest).pipe(
  switchMap(response => {
    if (response.status) {
      this.helperService.snackbar('Request Sent.');
      return [
        ReservationReqActions.bookPropertyRequestSuccess({ reservationRequest: response.result }),
        UiActions.notificationNew({...})
      ]
...

建议

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

bookPropertyRequest$ = createEffect(() => this.actions$.pipe(
    ofType(ReservationReqActions.bookPropertyRequest),
    concatMap(action =>
      this.reservationReqService.sendReservationRequest(action.reservationRequest).pipe(
        switchMap(response => [
          ReservationReqActions.bookPropertyRequestSuccess({ reservationRequest: response.result }),
          UiActions.notificationNew({...})
        ]),
        catchError(errorResponse => [
          ReservationReqActions.bookPropertyRequestFailure({
            error: errorResponse.error
          }),
          UiActions.errorAlert(errorResponse.error.message);
        ])
      )
    );
  ));

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

sendReservationRequest(request: ReservationRequest) {
  return this.httpClient.post(SERVICE_URL);
  // no {observe: 'response'} here
}

注意：在这个例子中非常简单，但也许在某些情况下可能需要测试errorResponse里面的内容catchError。为了避免出现任何问题errorResponse.error.message...此处超出主题。