CODEWITHSUNDEEP
react-routerredux-observable
tmp dev
tmp dev

Reputation: 9193

redux-observable perform transition once the action fires

I am using redux-observable with an epic. 

 return action$.ofType('APPLY_SHOPPING_LISTS')
            .flatMap(() => Observable.concat(Observable.of({ type: 'APPLYING_SHOPPING_LISTS' }), Observable.of({ type: 'APPLIED_SHOPPING_LISTS' }).delay(5000);

Once the epic finishes firing the 'APPLIED_SHOPPING_LISTS' I want to perform a transition, I am using react-router. What is the best place to do this? I saw redux-history-transitions, is this an add-in I should be using?

Further to add to this, I did use redux-history-transitions and change this to the following

return action$.ofType('APPLY_SHOPPING_LISTS')
            .flatMap(() => Observable.concat(Observable.of({ type: 'APPLYING_SHOPPING_LISTS' }), Observable.of({ type: 'APPLIED_SHOPPING_LISTS', meta: {
                        transition: (prevState, nextState, action) => ({
                            pathname: '/Shopping',
                        }),
                    } }).delay(5000);

This does seem to change the url and transition to happen, however the component I have configured under the '/Shopping' path does not render. It just stays on the current page. This is what my route looks like

<Route path='/' component={App}>
    <IndexRoute component={LoginContainer} />
    <Route path='login' component={LoginContainer} />
    <Route path='landing' component={LandingComponent} />
    <Route path='Shopping' component={ShoppingPathComponent} />
</Route>

Upvotes: 0

Views: 481

Answers (1)

jayphelps
jayphelps

Reputation: 15401

If you're using react-router v3 or before, you can use middleware that will let you push/replace history with redux actions, like react-router-redux. I'm not familiar with redux-history-transitions, but it may (or may not) work similarly.

With react-router-redux, it would just mean emitting the action you want to transition the history, when you want it to happen.

So you'd import the push action creator, and just add it as another action after APPLIED_SHOPPING_LISTS:

Observable.of(
  { type: 'APPLIED_SHOPPING_LISTS' },
  push('/Shopping')
)

Altogether, something like this:

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

const somethingEpic = action$ =>
  action$.ofType('APPLY_SHOPPING_LISTS')
    .flatMap(() => Observable.concat(
      Observable.of({ type: 'APPLYING_SHOPPING_LISTS' }),
      Observable.of(
        { type: 'APPLIED_SHOPPING_LISTS' },
        push('/Shopping')
      )
        .delay(5000)
    ));

If you're using v4, as of this writing react-router-redux is not yet compatible with it, but it's in active development here.

Upvotes: 1

Related Questions