异步操作未运行 Async React Redux Thunk

Question

我正在尝试构建一个 React 应用程序，它在初始加载时从 7 个 api 获取数据，然后将所有数据存储在 Redux 中，以便在应用程序中使用。 我对 React 还很陌生，而且有点编码菜鸟。

我在第一个应用程序页面上有一个调度 function，它在 componentDidMount() 上触发并在下面的操作中运行 fetchData() function。

export function getDataPending(actionType) {
  return {
    type: "FETCH_" + actionType.toUpperCase() + "_PENDING"
  };
}

export function getDataSuccess(actionType, data) {
  return {
    type: "FETCH_" + actionType.toUpperCase() + "_FULFILLED",
    payload: data
  };
}

export function getDataFailure(actionType, data) {
  return {
    type: "FETCH_" + actionType.toUpperCase() + "_REJECTED",
    payload: data
  };
}
//Sub data fetches
export function fetchNicSalts() {
  return dispatch => {
    dispatch(getDataPending("nic_salt"));
    axios
      .get(
        "API_FEED"
      )
      .then(response => {
        dispatch(getDataSuccess("nic_salt", response));
      })
      .catch(err => {
        dispatch(getDataFailure("nic_salt", err));
      });
  };
}

export function fetchFreebase() {
  return dispatch => {
    dispatch(getDataPending("freebase"));
    axios
      .get(
        "API_FEED"
      )
      .then(response => {
        dispatch(getDataSuccess("freebase", response));
      })
      .catch(err => {
        dispatch(getDataFailure("freebase", err));
      });
  };
}
//Main data fetch
export function fetchData() {
  return dispatch => {
    dispatch(getDataPending("data"));
    dispatch(fetchFreebase());
    dispatch(fetchNicSalts());
    dispatch(getDataSuccess("data", null));
  };
}

目前只有两个 api 获取，因为我试图让它们异步运行。 理想情况下，我希望调度按此顺序运行。 FETCH_DATA_PENDING FETCH_FREEBASE_PENDING FETCH_FREEBASE_FULFILLED FETCH_NIC_SALT_PENDING FETCH_NIC_SALT_FULFILLED **** 下一个 api ***** FETCH_DATA_FULFILLED

数据目前只是以错误的顺序存储。 请查看当前订单的图片。

我的数据履行订单

正如我所说，我是自学成才，不确定我是否走在正确的道路上，欢迎任何建议。 TIA。

Answer 1

您需要让您的 fetchFreebase 和 fetchNicSalts 返回 axios 调用，以便您可以在 fetchData 操作中等待它们。

这看起来像这样

export function getDataPending(actionType) {
  return {
    type: "FETCH_" + actionType.toUpperCase() + "_PENDING"
  };
}

export function getDataSuccess(actionType, data) {
  return {
    type: "FETCH_" + actionType.toUpperCase() + "_FULFILLED",
    payload: data
  };
}

export function getDataFailure(actionType, data) {
  return {
    type: "FETCH_" + actionType.toUpperCase() + "_REJECTED",
    payload: data
  };
}
//Sub data fetches
export function fetchNicSalts() {
  return dispatch => {
    dispatch(getDataPending("nic_salt"));
    return axios
      .get(
        "API_FEED"
      )
      .then(response => {
        dispatch(getDataSuccess("nic_salt", response));
      })
      .catch(err => {
        dispatch(getDataFailure("nic_salt", err));
      });
  };
}

export function fetchFreebase() {
  return dispatch => {
    dispatch(getDataPending("freebase"));
    return axios
      .get(
        "API_FEED"
      )
      .then(response => {
        dispatch(getDataSuccess("freebase", response));
      })
      .catch(err => {
        dispatch(getDataFailure("freebase", err));
      });
  };
}
//Main data fetch
export function fetchData() {
  return async (dispatch) => {
    dispatch(getDataPending("data"));
    await dispatch(fetchFreebase());
    await dispatch(fetchNicSalts());
    dispatch(getDataSuccess("data", null));
  };
}