異步操作未運行 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));
  };
}