Redux Thunk 未按顺序分派操作

Question

我正在使用 redux thunk，但遇到以下问题。 uploadClientImage 调度向数据库创建一个图像对象并返回图像 ID。

在创建 client_info 之前，我需要 2 个图像 ID。

问题是在我从 2 个uploadClientImage 调度中检索 id 之前调用了到clients 的 axios 帖子。有没有办法等到这 2 个调度完成后再调用 axios 帖子请求？

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

我认为 uploadClientImage 不需要是一个 redux 操作，因为你没有发送任何东西。它应该只是一个返回承诺的常规函数​​。我稍微重构了你的代码（没有测试它）。

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