가져 오기가 완료되기 전에 리디렉션이 발생합니다.

이전 페이지로 다시 리디렉션하는 데 문제가 거의 없습니다. 너무 빨리 발생합니다.

기본적으로 다음과 같은 기능 구성 요소가 있습니다.

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'경로의 구성 요소가 마운트된다는 것을 보여줍니다. 홈 구성 요소에는 방금 추가 된 녹음 목록이 포함되어 있습니다. 현재는 먼저 거기에 도착하는 것이 경주 인 것 같습니다. 지금까지 새로 만든 녹음이 목록에 있지만 여전히 잘못된 동작이라고 생각합니다.

리디렉션하기 전에 성공 사례가 완료되기를 기다리는 방법에 대한 아이디어가 있습니까?