英文:
react-redux-thunk why is my async action not working
问题
下面的代码是一个异步操作，但是它不起作用，即fetch工作正常，但dispatch不起作用。（请在底部的codesandbox链接中查看输出。）
function addUser(user) {
return {
type: FETCH,
payload: { user }
};
}
// action creator returns a function
export function fetchUser(githubUserName) {
console.log("fetching...");
return (dispatch) => {
return axios(`https://api.github.com/users/${githubUserName}`).then(
(user) => {
// dispatch(addUser(user.data));
let res = user.data;
dispatch({
type: FETCH,
payload: { res }
});
}
);
};
}
如果我取消注释dispatch(addUser(user.data));并注释掉下面的部分
let res = user.data;
dispatch({
type: FETCH,
payload: { res }
});
它就能工作。我不明白为什么前者不起作用。有没有办法让我的dispatch在不使用dispatch(addUser(user.data))的情况下工作？
codesandbox链接：https://codesandbox.io/s/fetch-with-redux-thunk-no-connect-used-jy5c77?file=/src/actions/fetch.js
英文:
The below code for an asynchronous action works does not work, i.e, the fetch works fine but the dispatch doesn't work. (Please see the output in the codesandbox link at the bottom.)
function addUser(user) {
return {
type: FETCH,
payload: { user }
};
}
// action creator returns a function
export function fetchUser(githubUserName) {
console.log("fetching...");
return (dispatch) => {
return axios(`https://api.github.com/users/${githubUserName}`).then(
(user) => {
// dispatch(addUser(user.data));
let res = user.data;
dispatch({
type: FETCH,
payload: { res }
});
}
);
};
}
If I uncomment the dispatch(addUser(user.data)); and comment the below part
let res = user.data;
dispatch({
type: FETCH,
payload: { res }
});
It works. I'm unable to get why the former does not work. Is there a way to make my dispatch work without using dispatch(addUser(user.data))?
Link to codesandbox : https://codesandbox.io/s/fetch-with-redux-thunk-no-connect-used-jy5c77?file=/src/actions/fetch.js
答案1
得分: 1
addUser 动作创建函数返回一个带有类型为 FETCH 和 payload 属性对象的动作对象。
function addUser(user) {
return {
type: FETCH,
payload: { user }
};
}
dispatch(addUser(user.data)); 调用是有效的。其他代码的区别在于存储在动作载荷中的内容。
let res = user.data;
dispatch({
type: FETCH,
payload: { res }
});
在这里，你硬编码了具有相同 type 属性的动作对象，但是 payload 属性对象具有 res 属性。将其更改为 user，它也可以工作。
let res = user.data;
dispatch({
type: FETCH,
payload: { user: res }
});
代码
export function fetchUser(githubUserName) {
return async (dispatch) => {
const { data } = await axios(
`https://api.github.com/users/${githubUserName}`
);
dispatch({
type: FETCH,
payload: { user: data }
});
};
}
英文:
The addUser action creator function returns an action object with type "FETCH" and a payload property object with a user property.
function addUser(user) {
return {
type: FETCH,
payload: { user }
};
}
The dispatch(addUser(user.data)); call is working. Where the other code differs is in what is stored in the action payload.
let res = user.data;
dispatch({
type: FETCH,
payload: { res }
});
Here you've hardcoded the action object with the same type property, but the payload property object has a res property. Change this to user and it also works.
let res = user.data;
dispatch({
type: FETCH,
payload: { user: res }
});
Code
export function fetchUser(githubUserName) {
return async (dispatch) => {
const { data } = await axios(
`https://api.github.com/users/${githubUserName}`
);
dispatch({
type: FETCH,
payload: { user: data }
});
};
}
答案2
得分: 0
我检查了你的代码行。它有一个问题。
修改为：
dispatch({
type: FETCH,
payload: { user: user.data }
});
英文:
I checked your codelines. It has one problem.
dispatch({
type: FETCH,
payload: { user: user.data }
});
you have to change like this.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论