CODEWITHSUNDEEP
javascripttypescriptreduxredux-observable
Théo Lavaux
Théo Lavaux

Reputation: 1454

Dispatch action at the end of Epic with redux-observables

I have the following epic in Redux Observables, and I would like to dispatch an action of another type (with different reducers) that ApplicantAction because I need the data passed in the response, how could I do so ?

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))),
      ),
    ),
  );

I would like to call an action called setNotification() with the following data:

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

And my second action looks like the following

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

Upvotes: 0

Views: 260

Answers (1)

seniorquico
seniorquico

Reputation: 1459

There are a few ways to dispatch a second action, and the specifics will depend on your requirements. The mergeMap operator is a simple way to dispatch multiple actions in response to an event. Here's a simple adaptation of your example epic:

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))),
      ),
    ),
  );

I assume here that you have an action creator function setNotification that takes in an axios response and returns an action. The TypeScript signature may be something like:

setNotification(response: Response): NotificationAction

Upvotes: 1

Related Questions