Асинхронное действие не выполняется Async React Redux Thunk - PullRequest
Новая
       11

Асинхронное действие не выполняется Async React Redux Thunk

0 голосов
/ 25 сентября 2019

Я пытаюсь создать приложение React, которое извлекает данные из 7 API-интерфейсов при первоначальной загрузке, а затем сохраняет все данные в Redux для использования в приложении.Я довольно новичок в React и немного новичок в коде.

У меня есть функция отправки на моей первой странице приложения, которая запускает компонентDidMount () и запускает функцию 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"));
    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

Данные в настоящий момент сохраняются в неправильном порядке.Пожалуйста, смотрите изображение для текущего заказа.

Мой порядок выполнения данных

Как я уже сказал, я самоучка и не уверен, что я на правильном пути, любые советыможно только приветствоватьТИА.

1 Ответ

1 голос
/ 25 сентября 2019

Вам нужно, чтобы ваши 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));
  };
}
...