在React Reducer中调用并存储来自API的数据

Question

我特别不会做出反应。我试图调用API并将其数据保存在Axios的React还原器中，但不知何故，API调用没有按预期工作。

但是，当在减速器中对API的相同输出进行硬编码时，一切都像一种魅力。请帮我弄清楚我做错了什么。我是否正确调用了API？

这里是带有Axios API调用的Reducer，下面是硬编码的响应：

export default function() {
return function (dispatch) {
axios.get("http://localhost/getUserDetails")
.then(
(response) => {
dispatch({
type: GET_USER_ROLES,
data: (
response.data
)
})
}
)
}
}
{/* this below function when uncomment works totally fine
export default function() {
return {
"ldap": "user",
"name": "user",
"role": "ABC,XYZ"
}
}*/}

Answer 1

下面是我的示例项目中的代码。调用后，请写入console.log以查看从API接收的输出。此外，打开开发工具->网络选项卡查看API调用是否成功。

export const addToCart = (id, qty) => async (dispatch, getState) => {
try {
const { data } = await axios.get(`/api/products/${id}`);
dispatch({
type: CART_ADD_ITEM,
payload: {
product: data._id,
name: data.name,
image: data.image,
price: data.price,
countInStock: data.countInStock,
qty
}
});
localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
} catch (error) {
dispatch({
type: null,
payload: error.response && error.response.data.message
? error.response.data.message
: error.message
});
}
};