我正在从Redux Saga进行登录auth调用,因此在JSX中,我可以使用条件渲染来等待状态更新,但是如何才能等待状态更新。 onSubmit
功能,以便登录成功后可以重定向。
我正在使用条件语句检查用户在分派onSubmit
之后是否在props.login(values)
函数中登录,但是我得到了将isLoggedIn
设置为的较早状态错误。
登录组件
<Formik
initialValues={{
email: '',
password: '',
}}
validationSchema={LoginSchema}
onSubmit={(
values,
{ setSubmitting, resetForm },
) => {
props.login(values);
setTimeout(() => {
if(props.isLoggedIn) {
props.history.push('/'); // Functional Component
} else {
resetForm();
}
setSubmitting(false);
}, 500);
}}
>
初始状态
const initialState = {
currentUser: {},
isLoggedIn: false,
errors: '',
propertyMessages: '',
};
减速器
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case AUTH: {
if (action.payload.error) {
return {
...state,
errors: action.payload.error,
};
} else {
localStorage.setItem('access-token', action.payload);
const user = jwtDecode(action.payload);
return {
...state,
errors: '',
isLoggedIn: true,
currentUser: {
id: user.id,
name: user.name,
},
};
}
}
case LOGOUT: {
localStorage.removeItem('access-token');
return {
...state,
isLoggedIn: false,
currentUser: {},
errors: '',
};
}
default:
return state;
}
};
Redux Saga
function* loginSaga(payload) {
try {
const data = yield call(loginCall, payload); // Get token
yield put({ type: AUTH, payload: data });
} catch (e) {
console.log(e);
}
}
在isLoggedIn
分派之后,true
设置为props.login(values)
,但是如果使用旧状态调用get,则重定向逻辑就在分派之后。
如果重定向逻辑可以延迟或在有条件渲染的情况下发生,则组件将呈现预期的结果,因为组件将具有更新后的值。
答案 0 :(得分:0)
找到了解决方案
componentDidUpdate(prevProps) {
if (this.props.currentUser !== prevProps.currentUser) {
this.props.history.push('/');
}
}
答案 1 :(得分:0)
据我了解您的问题,您需要使props.login可用,即一个承诺。从登录函数返回一个承诺,并将if逻辑放入then
中
这样的事情。如果您共享登录代码,可以了解更多有关此的信息。
onSubmit={(
values,
{ setSubmitting, resetForm },
) => {
props.login(values)
.then(() => {
if(props.isLoggedIn) {
props.history.push('/'); // Functional Component
} else {
resetForm();
}
setSubmitting(false);
})
}
}