我正在使用react-redux和react-router。我需要在分派动作后重定向。
例如：我注册了几步。行动后：
function registerStep1Success(object) {
return {
type: REGISTER_STEP1_SUCCESS,
status: object.status
};
}
我想重定向到带有 registrationStep2 的页面。我怎样才能做到这一点？
ps 在历史浏览器 '/registrationStep2' 中没有被访问过。此页面仅在结果注册成功后才会出现Step1 页面。
使用 React Router 2+，无论您在何处发送操作，都可以调用browserHistory.push()（或者hashHistory.push()如果您使用的是）：
import { browserHistory } from 'react-router'
// ...
this.props.dispatch(registerStep1Success())
browserHistory.push('/registrationStep2')
如果这是您使用的，您也可以从异步操作创建者那里执行此操作。
你检查过react-router-redux吗？这个库可以将 react-router 与 redux 同步。
这是文档中的一个示例，说明如何使用 react-router-redux 的推送操作实现重定向。
import { routerMiddleware, push } from 'react-router-redux'
// Apply the middleware to the store
const middleware = routerMiddleware(browserHistory)
const store = createStore(
reducers,
applyMiddleware(middleware)
)
// Dispatch from anywhere like normal.
store.dispatch(push('/foo'))
路由器版本 4+ 的最简单解决方案：我们使用 "react-router-dom": "4.3.1" 它不适用于版本 5+
从初始化的位置导出浏览器历史记录并使用 browserHistory.push('/pathToRedirect')：
必须安装包历史（例如：“history”：“4.7.2”）：
npm install --save history
在我的项目中，我在 index.js 中初始化浏览器历史记录：
import { createBrowserHistory } from 'history';
export const browserHistory = createBrowserHistory();
在动作中重定向：
export const actionName = () => (dispatch) => {
axios
.post('URL', {body})
.then(response => {
// Process success code
dispatch(
{
type: ACTION_TYPE_NAME,
payload: payload
}
);
}
})
.then(() => {
browserHistory.push('/pathToRedirect')
})
.catch(err => {
// Process error code
}
);
});
};
为了建立在 Eni Arinde 之前的答案的基础上（我没有评论的声誉），以下是store.dispatch在异步操作之后使用该方法的方法：
export function myAction(data) {
return (dispatch) => {
dispatch({
type: ACTION_TYPE,
data,
}).then((response) => {
dispatch(push('/my_url'));
});
};
}
诀窍是在动作文件中而不是在减速器中进行，因为减速器不应该有副作用。