Redux 过渡到动作执行后

Question

我有一个类似

的动作

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

  };
}

在成功执行我的操作后，我想将其重定向到 /profile。

这里我得到 router is not defined。

Answer 1

可以使用history提供当前路由的外部组件

import { browserHistory } from 'react-router'

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

Answer 2

你必须将路由器传递给你的 redux thunk 动作创建者（你的代码不是动作，而是我写的动作创建者）。例如它可能看起来像：

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

  };
}

您是否可以在调用此操作创建器的地方访问您的路由器？那里有吗？如果是，那么你有这样的东西（我不知道什么是 response）：

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

并且您必须将其更改为：

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

我假设您可以通过上下文访问路由器。

因为你没有说明你是如何调用这个动作的，所以我只是猜测。希望我的指导对您有所帮助。

还有一件事。新的 react-router api 在路由器中没有 transitionTo 方法！不知道你用的是新的还是旧的api。但是如果你得到这样的错误：

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

然后也改变 :

router.transitionTo("/profile")

至：

router.push("/profile")

Redux 过渡到动作执行后

Redux transition to after action execution

javascript

react-router

redux