How to make redux-observable send multiple actions before and after ajax request?

Question

I am trying to write Epic for redux-observable. But I am having a problem (

ON_EMPTY_FORM_STATE action is executed before .map(response => formSavedAction(response)) is executed.

How can I fix it? Basically what I am trying to get is:

1. Capture FORM_SEND action
2. Send Ajax request with payload
3. If i get 200 response from server then execute formSavedAction(response)
4. If i get 500 error then dispatch { type: ON_FORM_SUBMIT_ERROR }
5. At the end (no matter what Ajax request returned) I want to dispatch action { type: EMPTY_FORM_STATE }

And here is my code:

const saveProductEpic = (action$, $store) =>
action$.ofType(SUBMIT_FORM)
    .mergeMap(action => ajax.post('http://localhost:9000/products', action.payload,
        { 'Content-Type': 'application/json' }))
    .map(response => formSavedAction(response))
    .catch(err => { $store.dispatch({ type: ON_FORM_SUBMIT_ERROR }) })
    .do(() => { $store.dispatch({ type: EMPTY_FORM_STATE }) })

The issue is that action { type: EMPTY_FORM_STATE } is dispatched Before and not after AJAX request.

Is there any way to fix this?

Answer 1

const saveProductEpic = (action$, $store) => action$.ofType(SUBMIT_FORM)
.mergeMap((data) => Rx.Observable.concat(
    ajax.post(url, data.payload, params).mergeMap(
        (response) => Rx.Observable.of(formSavedAction(response)) )
        .catch(err => { $store.dispatch({ type: ON_FORM_SUBMIT_ERROR }) }),
    Rx.Observable.of({ type: ON_EMPTY_FORM_STATE })
    .delay(2000)
));

Answer 2

The way redux-observable works is that the observable returned by the epic function is subscribed to in the middleware. Your observable must emit redux actions because the subscribe function is just: action => store.dispatch(action)

Because you are using store.dispatch in your epic directly, you are circumventing redux-observable and dispatching things out of order from what you're expecting.

To emit the actions in the order you are expecting you can do this:

action$.ofType(SUBMIT_FORM)
  .mergeMap(action => ajax.post('http://localhost:9000/products', action.payload,
    { 'Content-Type': 'application/json' }))
  .map(response => formSavedAction(response))
  // Notice that catch is now returning the value by dropping the brackets.
  .catch(err => Observable.of({ type: ON_FORM_SUBMIT_ERROR }))
  // send whatever action has come through, and add the empty state action after it.
  .mergeMap(action => Observable.of(action, { type: EMPTY_FORM_STATE }))

Concept Demo: https://jsbin.com/focujikuse/edit?js,console

Answer 3

const saveProductEpic = (action$, $store) => action$.ofType(SUBMIT_FORM) .mergeMap(action => ajax.post('http://localhost:9000/products',action.payload, { 'Content-Type': 'application/json' }) .mergeMap(response => Observable.of(formSavedAction(response), emptyFormStateAction())) .catch(err => Observable.of( formSubmitErrorAction(), emptyFormStateAction()) ) );

where emptyFormStateAction and formSubmitErrorAction are action creators.