user2999287 user2999287 - 1 month ago 33
React JSX Question

React Redux with redux-observable use the router to navigate to a different page after async action complete

I am using redux-observable and this is my login epic:

const login = ( action$ ) => {
return action$.ofType(SessionActions.LOGIN_USER)
.flatMap(( {payload} ) => {
return sessionService.login(payload)
.do(payload => {
sessionService.setSession(payload));
// Here I want to redirect the user back to his last location
}).map(result => ({
type: SessionActions.LOGIN_SUCCESS,
payload: result
}));
});
}


But how I am redirecting the user to a different page after the login action success.

What is the redux way to do this?

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.