Redux Thunk未按顺序调度

Question

我正在使用redux thunk，并且出现以下问题。 uploadClientImage调度会为数据库创建一个图像对象并返回图像ID。

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

问题是axios post到clients被调用之前，我从2 uploadClientImage调度检索id的。有没有办法等到这两个调度完成之前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"); 
    }); 
    } 
}