is it ok to change the route programatically inside an epic in redux-observable

Question

I am using redux-observable and in my epics I am changing the route in some of them using browserHistory.push. Is this standard/good practice? my gut feeling tells no, however need your opinion. In addition to this after upgrading to react-router 4, I cannot get access to browserHistory how do I do this?

Answer 1

Imperatively calling browserHistory.push() is totally fine. If it works for your use case and you don't need to know about the route changes in your reducers, carry on!

That said, the "purist" way would be for your epic to emit an action that will cause the route change. This can be done in react-router v4 by using the new react-router-redux, which supersedes the old one with the same name.

Once added, you can use the provided actions creators:

import { push } from 'react-router-redux';

export const somethingEpic = action$ =>
  action$.ofType(SOMETHING)
    .switchMap(() => {
      somethingLikeAjaxOrWhatever()
        .mergeMap(response => Observable.of(
          somethingFulfilled(response),
          push('/success-page')
        ))
    });

To be clear, push() replace() etc in react-router-redux are action creators--aka action factories. They don't actually cause the route change themselves, or perform any side effects at all. They return an action that needs to be dispatched somehow for the route to change.

---

The other benefit of using actions to signal route change intents is testability. You no longer have to mock a history API, you can just assert that the epic emits the expected action. This is known as "effects as data", since your code doesn't perform the actual side effect, you just generate the intent.