在我的 React/Redux 应用程序中,我有一些异步操作。
假设用户向服务器发起 getData
请求。立即发送 GET_DATA_REQUEST
并且 getData
AJAX 调用正在发送到服务器。
无论成功或失败,GET_DATA_SUCCESS
或 GET_DATA_FAILURE
操作都会相应地分派(dispatch),并将数据呈现给 UI。
现在,我希望我的应用程序推送历史状态(使用 react-router-redux
)作为对 AJAX 回调的 react 。这意味着,一旦成功,用户将被“重定向”到另一个 URL(路由),并显示一个依赖于新接收到的数据的不同模块。
我意识到在 reducer 中加入这个功能是一个非常糟糕的想法,因为它不再是纯粹的(URL 更改是一个副作用)。
有什么想法吗?
谢谢
最佳答案
我相信这是处理您的情况的好方法。
首先,您应该在 reducer 中添加一个新属性以了解是否要重定向。
像这样
const initialState = {
...
redirect : false // You could use a String with the new url instead of true/false
....
}
switch ...
case GET_DATA_SUCCESS:
return {
...state,
redirect:true,
}
case GET_DATA_FAILURE;
return {
...state,
redirect:false
}
然后,在连接到 reducer 的组件中,您应该检查 componentDidUpdate 函数中“redirect”的值。
componentDidUpdate(){
let {redirect} = this.props.yourReducerState;
if(redirect === true){
this.context.router.push("new-url");
}
}
最后,您应该在 componentWillUnmount 上重置“重定向”
希望对您有所帮助!
关于reactjs - Redux - 分派(dispatch)异步操作时更改 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36886506/