Перенаправление происходит до завершения выборки

Question

У меня небольшая проблема с перенаправлением на предыдущую страницу - это происходит слишком рано.

По существу, у меня есть такой функциональный компонент:

export const CreateRecordingControls = ({ recording, handleCreateRecording }) => {
  const history = useHistory();

  const handleCreate = async () => {
    const promise = Promise.resolve(handleCreateRecording(recording));
    await Promise.all([promise]).then(function () {
      history.push('/home');
    });
  }

  return (
    <Fragment>
      <button onClick={() => handleCreate()}>Create</button>
    </Fragment>
  );
}

const mapDispatchToProps = dispatch => ({
  handleCreateRecording: recording => {
    dispatch(handleCreateRecording(recording));
  }
});

const CreateRecordingControlsView = withRouter(connect(null, mapDispatchToProps)(CreateRecordingControls));

export default CreateRecordingControlsView;

Когда пользователь нажимает кнопку «Создать», он вызывает действие createRecording:

export const handleCreateRecording = (recording) => {
  return dispatch => {
    dispatch(handleCreateRecordingBegin());
    fetch(`${config.get('api')}/api/recordings/create`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(recording, replacer)
    }).then(data => {
      dispatch(handleCreateRecordingSuccess(data));
    }).catch(error =>
      dispatch(handleCreateRecordingFailure(error))
    );
  }
}

Что идет к редуктору:

export default (state = [], action) => {
  switch (action.type) {
    case 'CREATE_RECORDING_BEGIN':
      return {
        ...state,
        loading: true,
        error: null,
        finished: false
      }
    case 'CREATE_RECORDING_SUCCESS':
      return {
        data: action.payload,
        loading: false,
        finished: true
      }
    default:
      return state;
    }
  }

Но в этом случае он по-прежнему показывает, что компонент на маршруте '/ home' будет монтироваться до вызова успешной обработки. Домашний компонент содержит список только что добавленных записей. Кажется, в настоящее время это гонка, которая доберется там первой. Пока что вновь созданная запись находится в списке, но я думаю, что это все еще неправильное поведение.

Есть идеи, как дождаться успешного завершения до конца sh перед перенаправлением?

Answer 1

Функция dispatch не возвращает обещание, поэтому вы ничего не ждете. С redux-thunk, если вы хотите дождаться результата отправки, вы должны сделать это в вашем создателе действия: куда вы отправляете свой handleCreateRecordingSuccess.

Альтернативой является наблюдение значения состояния finished и pu sh в вашей истории, когда оно получает значение, которое вас интересует.

Answer 2

Похоже, что обещание выборки в данный момент не возвращается, поэтому Promise.resolve просто произойдет немедленно.

Я бы попытался вернуть фактическое обещание из выборки, то есть в ожидании результатов запроса. handleCreateRecording извлекает, а затем возвращает его при отправке действия. Обещание решимости и обещание. Все не должно быть необходимым. Если вы хотите перехватить какие-либо ошибки при извлечении, вы можете просто обернуть await в блок try / catch.