Reactjs React Saga-在promise解决之前防止存储更新
嗨,我对redux/saga/promises有问题-不完全确定问题在哪里:Reactjs React Saga-在promise解决之前防止存储更新,reactjs,redux,es6-promise,redux-saga,Reactjs,Redux,Es6 Promise,Redux Saga,嗨,我对redux/saga/promises有问题-不完全确定问题在哪里: //USER SERVICE function login(username, password) { const requestOptions = { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: "username=" + username + "
//USER SERVICE
function login(username, password) {
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body:
"username=" + username + "&password=" + password + "&grant_type=password"
};
return fetch(`${Config.apiUrl}/Token`, requestOptions)
.then(handleLoginResponse)
.then(user => {
// login successful if there's a jwt token in the response
if (user.access_token) {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem("user", JSON.stringify(user));
}
return user;
})
.catch(error => {
return { error };
});
}
//AUTH SAGA
export function* login(action) {
const { username, password } = action.payload;
const response = userService.login(username, password);
console.log(response);
if (response.error) {
yield put({ type: actions.LOGIN_FAILURE, payload: response.error });
} else {
yield put(actions.loginUserSuccessful());
yield delay(1000);
// yield history.push("/");
}
}
//AUTH ACTIONS
export function loginUserSuccessful() {
return { type: LOGIN_SUCCESS };
}
//AUTH REDUCER
export function authentication(state = initialState, action) {
const { payload } = action;
switch (action.type) {
case actions.LOGIN_SUCCESS:
return {
loggedIn: true,
user: action.user
};
case actions.LOGIN_FAILURE:
return state;
case actions.USERS_LOGOUT:
return state;
case actions.LOGIN_TOGGLE_MODAL:
const { isLoginModalOpen } = payload;
return {
...state,
isLoginModalOpen
};
default:
return state;
}
}
我有一个登录菜单项,当用户登录时(如商店中填充的“user”和“loggedIn”所示),该菜单项将切换为“member”菜单项。登录表单是header组件的一部分
因此,当我登录后端时,就会调用令牌(用户服务),这是通过saga(AUTH saga)实现的。当用户登录时,调用操作“loginUserSuccessful”(登录操作)。这将调用reducer,该reducer使用用户和“loggedIn”(AUTH reducer)更新状态
问题在于将“loggedIn”设置为true,并且在设置“user”对象之前更新状态。因此,当承诺最终解决时,将设置用户,但不会更新标头。因此,它只有在我重新加载页面时才会获得新状态
我注意到,由于某种原因,当从传说中调用该操作时,我可以从该操作中提取“用户”,即使在调用loginUserSuccessful时我没有手动设置它-我从教程中获得了这一点,所以我不完全确定它是如何工作的-我还是新手
我肯定我做错了什么。但也许有人可以帮忙?请告诉我需要更多信息。找到了答案。因此,很明显,这部传奇剧将承诺附在了这部电影上。但这并没有立即得到解决。我所需要做的就是将用户数据作为有效负载一起发送。然后它成功了