在 Epic 结束时使用 redux-observables 调度操作答案

【问题标题】：Dispatch action at the end of Epic with redux-observables在 Epic 结束时使用 redux-observables 调度操作
【发布时间】：2020-11-24 17:18:11
【问题描述】：

我在 Redux Observables 中有以下史诗，我想调度 ApplicantAction 的另一种类型的操作（使用不同的减速器），因为我需要在 response 中传递的数据，我该怎么做？

const updateApplicantEpic: Epic<ApplicantAction, ApplicantAction, State> = action$ =>
  action$.pipe(
    filter(isOfType(EApplicantAction.UpdateApplicant)),
    mergeMap(action =>
      from(
        createAxiosInstance().put(`/applicant/edit/${action.applicantId}`, action.applicant),
      ).pipe(
        map(({ status }) => updatedApplicant(status, action.applicant)),
        startWith(updatingApplicant()),
        catchError(({ response }) => of(updatingApplicantFailed(response.status))),
      ),
    ),
  );

我想使用以下数据调用名为 setNotification() 的操作：

{
   id: action.notificationId,
   status: response.status
   title: response.data.title,
   message: response.data.messages?.join('\n'),
   open: false
}

我的第二个动作如下所示

const setNotificationEpic: Epic<NotificationAction, NotificationAction, State> = action$ =>
  action$.pipe(
    filter(isOfType(ENotificationAction.SetNotification)),
    map(action => setNotificationSuccess(action.notification)),
  );

【问题讨论】：

标签： javascript typescript redux redux-observable

【解决方案1】：

有几种方法可以调度第二个操作，具体取决于您的要求。 mergeMap 操作符是一种简单的方法来分派多个操作以响应事件。这是您的示例史诗的简单改编：

const updateApplicantEpic: Epic<ApplicantAction, ApplicantAction, State> = action$ =>
  action$.pipe(
    filter(isOfType(EApplicantAction.UpdateApplicant)),
    mergeMap(action =>
      from(
        createAxiosInstance().put(`/applicant/edit/${action.applicantId}`, action.applicant),
      ).pipe(
        mergeMap((response) => of(
          updatedApplicant(response.status, action.applicant),
          setNotification(response),
        )),
        startWith(updatingApplicant()),
        catchError(({ response }) => of(updatingApplicantFailed(response.status))),
      ),
    ),
  );

我在这里假设你有一个动作创建函数setNotification，它接收一个 axios 响应并返回一个动作。 TypeScript 签名可能类似于：

setNotification(response: Response): NotificationAction

【讨论】：