Как создать цепочку асинхронных функций с ожиданием, когда функции являются родительскими и дочерними?

Question

У меня есть компонент редактора профиля (родительский) и компонент обрезки (дочерний). Я хочу обновить базу данных двумя ожидающими друг друга асинхронными действиями. Это: 1.) отправка от родителя, у которого есть поля формы, и 2.) отправка из обрезки, у которого есть блоб изображения. На данный момент у меня есть родительский файл, дочерний файл и файл действий.

соответствующий фрагмент из родительского:

 handleSubmit = e => {
    e.preventDefault();
    // Dispatches action to update database with form fields
    this.props.accountSettingsUpdateProfile(this.state);
  };

соответствующий фрагмент изребенок:

  onClickSave = () => {
      if (this.editor) {
        this.editor.getImageScaledToCanvas().toBlob(blob => {
        // Dispatches an action to upload database with new cropped image
        this.props.uploadProfileImage(blob);
      });

И в моем файле действий у меня есть что-то вроде:

export const accountSettingsUpdateProfile = settings => async () => {//etc}

export const uploadProfileImage = file=> async () => {//etc}

Я хотел бы иметь что-то вроде:

Родитель

handleSubmit = e => {
    e.preventDefault();
    // Dispatches action to update database with form fields
    this.props.dispatchParentFieldsAndChildBlobToActions();
  };

Действия

  try {
      //Both try update, if either error logged to console.
      } catch (error) {
    console.log(error)
  }

Суть в том, что я не знаю, как объединить эти действия. Я могу добиться того, чего хочу, просто вырезав компонент кадрирования и вставив его в родительский элемент вместо того, чтобы иметь его как отдельный компонент, но это обман.

Answer 1

Альтернативный подход был бы таким. Сохраните релевантные состояния детей и родителей в хранилище редукций, а затем, когда вам это нужно, вызывайте свои действия по нажатию кнопки или что-либо в родительском или дочернем элементе.

ваш родитель или ребенок компоненты

handlSubmit=()=>{
this.props.saveMyProfile((info)=>console.log(info)); //you can passs a callback if you wish
}

Actions.js

export const saveMyProfile = (callback) => async (dispatch, getState) => {
try {
    const profileData= getState().profile.data; //get data from your redux store
    const blob= getState().profile.blob; 

    if (!profileData || !blob){
     callback("either profile data or blob is empty");
     return;
    }

    const response = await axios.get(baseURL, { profileData,blob });
    // console.log("data: ", response.data);

    dispatch({ type: SET_PROFILE_DATA, payload: null });
    callback("profile has been successfully updated!");
  } catch (err) {
    console.log(err);
   callback("error occured!");
  }

}