如何使用UseDispatch Hook等待redux操作返回的响应

Question

我是redux和我现在正在尝试编写一个登录组件。

我的重复动作是这样的。

export const fetchToken = (params) => {
return (dispatch) => {
const config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
};
return axios
.post(`${baseUri}/api/token`, params, config)
.then((res) => {
dispatch({
type: LOGGED_IN,
payload: res.data,
});
})
.catch((err) => {
console.log(err);
alert('Provided username and password is incorrect');
});
};
};

正如你所看到的，我是在回报一个承诺。我试着在组件中使用它，但它不起作用。

我正在使用来自react-redux的useDispatch挂钩

我的代码看起来像这个

const checkValidate = () => {
if (email.length < 1 || password.length < 1) {
alert('Please fill all the details');
return;
} else {
const params = new URLSearchParams();
params.append('username', email);
params.append('password', password);
params.append('grant_type', 'password');
dispatch(fetchToken(params)).then((res) => {
alert('success')
}).catch((err) => alert('not success'));
}
// navigation.navigate('Home');
};

正如你所看到的，我正在提醒成功。问题是，如果我写错了用户名和密码。回应总是转化为成功回应。它将警告成功，然后它将警告来自fetchToken操作的响应，即警告('Provided username and password is incorrect');我的代码有什么问题吗。

而且每当我尝试console.logthen response时，它总是会返回未定义的

Answer 1

进行时

.then((res) => {
dispatch({
type: LOGGED_IN,
payload: res.data,
});
})
.catch((err) => {
console.log(err);
alert('Provided username and password is incorrect');
});

您可以从链中删除错误和结果。如果你想把它们传给下一个.then或.catch，你必须返回/重新抛出它：

.then((res) => {
dispatch({
type: LOGGED_IN,
payload: res.data,
});
+       return res
})
.catch((err) => {
console.log(err);
alert('Provided username and password is incorrect');
+       throw err
});