varad
varad

Reputation: 8029

Redux transition to after action execution

I have an action like

export function loginSuccess(response){
    return (dispatch, getState) => {
    dispatch({ response, type: types.LOGIN });
    router.transitionTo("/profile")

  };
}

Here after successful execution of my action I would like to redirect it to /profile.

Here I am getting router is not defined.

Upvotes: 3

Views: 1324

Answers (2)

Krzysztof Sztompka
Krzysztof Sztompka

Reputation: 7204

You have to pass router to your redux thunk action creator (you pice of code is not an action but as I wrote action creator). For example it could looks like:

export function loginSuccess(router, response){
  return (dispatch, getState) => {
    dispatch({ response, type: types.LOGIN });
    router.transitionTo("/profile")

  };
}

Do you have access to your router in place where you invoke this action creator ? is it available there? if yes then you have there something like this (I don't know what is response):

this.props.dispatch(loginSuccess(response));

and you have to change it to:

this.props.dispatch(loginSuccess(this.context.router, response));

I assume that you have access to router by context.

Because you don't show how you invoke this action I'm only guessing. I hope that my instruction will help you.

And one more thing. New react-router api don't have transitionTo method in router! I don't know if you use new or old api. But if you get error like:

Calling transitionTo fails with: 'location.search.substring is not a function'

then change also :

router.transitionTo("/profile")

to:

router.push("/profile")

Upvotes: 4

Marius Darila
Marius Darila

Reputation: 873

Outside components you can use history to provide the current route

import { browserHistory } from 'react-router'

export function loginSuccess(response){
    return (dispatch, getState) => {
    dispatch({ response, type: types.LOGIN });
    browserHistory.push("/profile")
  };
}

Upvotes: 1

Related Questions