Async action not running Async React Redux Thunk

Question

I am trying to build a React App that fetches data from 7 api's, on initial load, then stores all the data in Redux, to use within the app. I am pretty new to React and a bit of a coding noob.

I have a dispatch function on my first app page that fires on componentDidMount() and runs the fetchData() function in the action below.

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));
  };
}

There are only two api fetches at the moment, as I am trying to get them to run async. Ideally what I want to happen the dispatches to run in this order. FETCH_DATA_PENDING FETCH_FREEBASE_PENDING FETCH_FREEBASE_FULFILLED FETCH_NIC_SALT_PENDING FETCH_NIC_SALT_FULFILLED **** next api ***** FETCH_DATA_FULFILLED

The data is being stored at the moment just in the wrong order. Please see image for current order.

My data fulfillment order

As I say, I am self taught and not sure if I am on the right path, any advice is welcome. TIA.

Use Promises or async/await to synchronize your async code.

Emile Bergeron
– Emile Bergeron

2019-09-25 15:08:21 +00:00
Commented Sep 25, 2019 at 15:08 — Emile Bergeron
– Emile Bergeron, Commented Sep 25, 2019 at 15:08

Foyarash · Accepted Answer · 2019-09-25 15:08:45Z

You need to make your fetchFreebase and fetchNicSalts return the axios calls so that you can await them in the fetchData action.

This would look like this

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));
  };
}

Worked perfectly, that makes a lot of sense, thanks for showing me the adapted code too.

Collectives™ on Stack Overflow

Async action not running Async React Redux Thunk

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related