redux-observable How to dispatch multiple actions with pipe?

Question

I realized that

const pingEpic = action$ =>
  action$.ofType('PING')
    .delay(1000) // Asynchronously wait 1000ms then continue
    .mapTo({ type: 'PONG' });

mean

dispatch({ type: 'PING' });
dispatch({ type: 'PONG' });

Howeber, I don't realize how to dispatch two actions with pipe.

my code is below

const signUpEpic = (action$: Observable<Action>) => action$.pipe(
  ofType(actions.GET_DEVICE_TOKEN),
  ofType(actions.SIGN_UP),
  exhaustMap(({ payload }) => request({
    url: 'users',
    method: 'post',
    data: {
      user: {
        email: payload.email,
        password: payload.password,
        device_token: payload.device_token,
        sign_up_with: 'email_and_password',
      },
    },
  }).pipe(
    map(data => camelcaseKeysDeep(data)),
    map(({ user, authToken }) => currentUserActions.successLogin({ user, authToken })),
    catchError((errorMessage: string) => Observable.of(actions.failLogin({ errorMessage }))),
  )),
);

Do you have any idea?

I tried below code too.

ofType(actions.GET_DEVICE_TOKEN),
mapTo(actions.SIGN_UP),

thanks

Sorry, it's not clear what you're asking. Perhaps you can simplify the code you provided to only the essentials and elaborate on the question? — jayphelps

Linh N. Linh N. · Accepted Answer · 2018-08-15T12:46:31

You can use mergeMap to dispatch multiple actions

.pipe(
  mergeMap(data => [
    camelcaseKeysDeep(data)),
    currentUserActions.successLogin(data.user, data.authToken))
  ],
  catchError((errorMessage: string) => Observable.of(actions.failLogin({ errorMessage }))),
)),

redux-observable How to dispatch multiple actions with pipe?

1 Answers