score:3

Accepted answer

I'm totally new to react/redux, but I face the same problem as you, so I create a small APP with a login page.

// On your Login.JS you could implement the component lifecycle

componentWillReceiveProps(nextProps) {
    if (nextProps.isAuthenticated){
        this.context.router.push({pathname:'/'});
    }
}

So, when your 'action' send to the 'reducer' the type: LOGIN_SUCCESS your going to change the corresponding state and when your component 'receive props' your going to check and redirect. I hope this small example help you.

score:10

If you use redux-observable with react-router-redux, you can do any redirections within your epics:

import { ajax } from 'rxjs/observable/dom/ajax';
import { push } from 'react-router-redux';
import NProgress from 'nprogress';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

export default function login(action$) {
  return action$.ofType('LOGIN_USER')
    .do(() => NProgress.start())
    .mergeMap(payload => (
       // Call your login service here, please note that it must be an observable to continue in your epic chain.
       Observable.fromPromise(sessionService.setSession(payload))
         // This is the redirect you're looking for, it's now became an action thanks to react-router-redux :)
         .mapTo(push({ url: '/' }))
         .do(() => NProgress.done())
  ));
}

I have even added a progress indicator for the bonus points :) It's constructed with help from redux-observable's own navigation example


Related Query

More Query from same tag