Redux Thunk Not Dispatching Actions in Order

Question

I'm using redux thunk and I have the following problem. The uploadClientImage dispatch creates an image object to the database and returns the image id.

I need the 2 image id's before I create client_info.

The problem is the axios post to clients is called before I retrieve the id's from the 2 uploadClientImage dispatches.Is there a way to wait until those 2 dispatches are done before the axios post request is called?

action.js

export function uploadClientImage(image_file) {
  return function(dispatch) {
    var formData = new FormData();
    for (var key in image_file) {
      formData.append(key, image_file[key]);
    }
    console.log(formData);
    axios.post(`${API_URL}/photos`, formData, {withCredentials: true, headers: {'Content-Type': 'multipart/form-data'}})
      .then(response => {
        var image_id = response.data.id;
        return image_id;
          })
     .catch(() => {
        console.log("Can't fileUpload");
      });
  }
}

export function createClient(client_info, logo, photo) {
  return function(dispatch) {
    var logo = client_info.logo_id[0];
    var logo_id= dispatch(uploadClientImage(logo);

    var photo = client_info.photo_id[0];
    var photo_id = dispatch(uploadClientImage(photo));

    client_info["photo_id"] = photo_id;
    client_info["logo_id"] = logo_id;

    axios.post(`${API_URL}/clients`, client_info, {withCredentials: true})
    .then(response => {

      //......
    })
   .catch(() => {
      console.log("Can't create client");
    });
  }
}

Answer 1

I don't think uploadClientImage needs to be a redux action since you're not dispatching anything. It should just be a regular function returning a promise. I refactored your code a little bit (without testing it).

export function uploadClientImage(image_file) {
    var formData = new FormData();
    for (var key in image_file) {
      formData.append(key, image_file[key]);
    }
    console.log(formData);
    // return the promise axios creates
    return axios.post(`${API_URL}/photos`, formData, {withCredentials: true, headers: {'Content-Type': 'multipart/form-data'}})
      .then(response => {
        var image_id = response.data.id;
        return image_id;
          })
    .catch(() => {
        console.log("Can't fileUpload");
      });
}

export function createClient(client_info, logo, photo) {
  return function(dispatch) {
    var logo = client_info.logo_id[0];
    var photo = client_info.photo_id[0];
    // upload both images at the same time, continue when both are done
    Promise.all([uploadClientImage(logo), uploadClientImage(photo)])
    .then(function(results){
        client_info["photo_id"] = results[0];
        client_info["logo_id"] = results[1];

        return axios.post(`${API_URL}/clients`, client_info, {withCredentials: true})
    })
    .then(response => {

      //......
    })
    .catch(() => {
        console.log("Can't create client");
    });
  }
}