Redux Thunk nicht Dispatching Aktionen in Reihenfolge

Question

Ich benutze Redux Thunk und ich habe das folgende Problem. Der Versand uploadClientImage erstellt ein Image-Objekt für die Datenbank und gibt die Image-ID zurück.

Ich brauche die 2 Image-IDs, bevor ich client_info erstelle.

Das Problem ist die axios Post clients aufgerufen wird, bevor ich die IDs von den 2 uploadClientImage dispatches.Is es eine Möglichkeit, zu warten, bis diese zwei Depeschen vor der axios Post-Anforderung fertig sind abzurufen genannt wird?

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

Ich glaube nicht, uploadClientImage braucht eine Redux Aktion zu sein, da du nichts Dispatching. Es sollte nur eine reguläre Funktion sein, die ein Versprechen zurückgibt. Ich habe deinen Code ein wenig überarbeitet (ohne ihn zu testen).

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