[英]React Redux Thunk Chaining Actions Issue
我正在制作一个React应用,并且一直在使用redux和thunk取得了一些成功,但是,我最近需要链接一些操作。 我似乎遇到的问题是,即使第一个操作的api调用也返回422,所以我希望有Promise.reject(error);
返回将阻止堆栈继续运行,但是无论如何它都会一直沿链条向下移动。
这是一些代码:
actions.js
这是我要使用的链接操作:
export const resetPasswordAndRefreshUser = (password, password_confirmation) => {
return (dispatch, getState) => {
return dispatch(resetPassword(password, password_confirmation))
.then((result) => {
//// This shouldn't get executed in resetPassword rejects /////
//// console.log(result) is undefined ////
return dispatch(getAuthedUser());
}, (error) =>{
// Do Nothing
}).catch((error) => {
return Promise.reject(error);
});
}
};
以及动作定义本身:
export const resetPassword = (password, password_confirmation) => {
return dispatch => {
dispatch({
type: authConstants.LOGIN_RESET_REQUEST
});
return AuthService.resetPassword(password, password_confirmation)
.then((result) => {
dispatch({
type: authConstants.LOGIN_RESET_SUCCESS
});
dispatch({
type: alertConstants.SUCCESS,
message: 'Your new password was set successfully.'
});
history.push('/');
}, error => {
dispatch({
type: authConstants.LOGIN_RESET_ERROR
});
dispatch({
type: alertConstants.ERROR,
message: 'Error: ' + error
});
});
}
};
export const getAuthedUser = () => {
return dispatch => {
dispatch({
type: authConstants.LOGIN_AUTHED_USER_REQUEST
});
return AuthService.getAuthedUser()
.then((result) => {
dispatch({
type: authConstants.LOGIN_AUTHED_USER_SUCCESS,
user: result
});
}, error => {
dispatch({
type: authConstants.LOGIN_AUTHED_USER_ERROR
});
dispatch({
type: alertConstants.ERROR,
message: 'Error: ' + error
});
});
};
};
service.js
static getAuthedUser = () => {
return API.get(config.api.url + '/me')
.then((response) => {
// Get Current User From LocalStorage
const vmuser = JSON.parse(localStorage.getItem('vmuser'));
if (vmuser) {
// Update User & Set Back In LocalStorage
vmuser.user = response.data;
localStorage.setItem('vmuser', JSON.stringify(vmuser));
}
return response.data;
}).catch(error => {
return Promise.reject(error);
}).finally(() => {})
};
static resetPassword = (password, password_confirmation) => {
return API.post(config.api.url + '/reset', { password, password_confirmation })
.then((response) => {
return response.data;
}).catch(error => {
console.log('reset error');
return Promise.reject(error);
}).finally(() => {})
};
现在resetpassword api调用返回422(根据我的要求进行测试)。 但是,当我查看“网络请求”选项卡时,尽管仍应在authservice中拒绝承诺,但仍会进行getAuthedUser调用。
我只是误解了Promises,何时应执行.then()
?
嗯,我想借助一些进一步的Google搜索,发现了执行此操作的正确方法:
在合并操作中,我添加了当前状态的检查:
// State Updated, Check If Successful
if (true === getState().auth.resetPassword) {
return dispatch(getAuthedUser());
}
因此,合并操作的完整代码如下所示:
export const resetPasswordAndRefreshUser = (password, password_confirmation) => {
return (dispatch, getState) => {
return dispatch(resetPassword(password, password_confirmation))
.then((result) => {
// State Updated, Check If Successful
if (true === getState().auth.resetPassword) {
return dispatch(getAuthedUser());
}
}, (error) => {
// Do Nothing
}).catch((error) => {
return Promise.reject(error);
});
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.