reactjs - 成功异步操作后重定向的正确方法:将“历史”作为参数传递给 thunk VS using有条件地使用 Redux 商店?
问题描述
在使用 Redux Thunk 执行异步操作后,我了解了 2 种重定向到不同页面的方法:
1-方法:将“历史”对象作为参数传递给异步操作。
在您的组件中,您使用“useHistory”钩子定义“历史”对象并将其传递给您的异步操作:
function Register(){
const history = useHistory()
const dispatch = useDispatch()
function registerHandler(){
dispatch(registerAsync(registerForm, history))\
}
return (
// JSX Code
<button onClick={registerHandler}>Register</button>
)
}
然后在您的异步操作中,您可以使用“history.push()”重定向:
export function registerAsync(data, history){
return async function (dispatch) {
try {
const response = await Axios.Post('api/register/', data)
history.push('/register_success')
} catch (e) {
dispatch(registerError(e))
}
}
}
2-方法:使用根据 Redux 存储值有条件地呈现的 <Redirect> 组件:
如果存储值为真,则在组件中有条件地返回:
function Register(){
const dispatch = useDispatch()
const registerSuccess = useSelector((store) => store.auth.registerSuccess)
function registerHandler(){
dispatch(registerAsync(registerForm, history))\
}
if (registerSuccess) {
return <Redirect push to="/register_success"/>
}
return (
// JSX Code
<button onClick={registerHandler}>Register</button>
)
}
在我们的 Async 操作中,我们调度了一个将“registerSuccess”设置为 true 的操作:
export function registerAsync(data){
return async function (dispatch) {
try {
const response = await Axios.Post('api/register/', data)
dispatch(registerSuccess())
} catch (e) {
dispatch(registerError(e))
}
}
}
减速器:
case actionTypes.REGISTER_SUCCESS:
newState.registerSuccess = true
return newState
有谁知道这两种方法中哪一种是正确的,为什么?
非常感谢!
解决方案
推荐阅读
- matlab - 如何在 MATLAB 中显示一对两个随机变量的独立性?
- sqlplus - 在表中插入值
- asp.net - 从 asp.net 验证 shopify
- batch-file - 无需重启即可更改和刷新文件夹图片的批处理脚本
- javascript - Redux Observable:如何动态映射和调用相同的操作
- mysql - SQL:按 ASC 排序,有限制
- android - 检查用户是否已经在 SQLite 数据库中的简单方法不起作用
- angular - Angular 6 - 在 ngFor 中选择
- api - 如何为 OneLogin 的云目录委派两个因素?
- html - 如何让我的徽标和导航栏在同一行?