react-redux-thunk为什么我的异步操作不起作用

jbose2ul 于 2023-08-05 发布在 React

关注(0)|答案(2)|浏览(120)

下面的异步操作代码工作不工作，也就是说，获取工作正常，但分派不工作。（请参阅底部的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(addUser(user.data))？
链接到codesandbox：https://codesandbox.io/s/fetch-with-redux-thunk-no-connect-used-jy5c77?file=/src/actions/fetch.js

redux

来源：https://stackoverflow.com/questions/76777081/react-redux-thunk-why-is-my-async-action-not-working

2条答案

按热度按时间

k5hmc34c1#

addUser操作创建器函数返回一个类型为"FETCH"的操作对象和一个具有user属性的payload属性对象。

function addUser(user) {
  return {
    type: FETCH,
    payload: { user }
  };
}

字符串
dispatch(addUser(user.data));调用正在工作。其他代码的不同之处在于存储在操作有效负载中的内容。

let res = user.data;
dispatch({
  type: FETCH,
  payload: { res }
});

型
在这里，您使用相同的type属性对action对象进行了硬编码，但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 }
    });
  };
}

型

的数据