Как правильно направить после отправки формы в React с приложением Redux

Question

Изначально я хотел обновить / повторно выбрать элементы в компоненте списка после отправки и закрыть компонент формы редактора элементов.

Примечание: перед введением избыточного кода в проект я выполнял маршрут в функции handleSubmit сразу после axios.put(...) и, очевидно, не обновил список, потому что маршрутизация происходит до завершения асинхронного вызова.

Следующие фрагменты показывают, как я использую функцию стрелки в качестве обратного вызова для выполнения маршрутизации в обещании:

в partDetail.js module

handleSubmit(event){
    event.preventDefault();
  let part =  this.props.part;
  this.props.updatePart(part, ()=>this.props.history.push('/home'));
    return false;
}

в файле partsActions.js

export function updatePart(part, routeCallback){
    return function(dispatch) {
        dispatch({type: UPDATE_PART});
        axios.put(`${apiUrl}${part.id}`,part)
            .then(response => {
                routeCallback();
                //dispatch({type: UPDATE_PART_FULFILLED, payload: response.data})
            })
            .catch((error) => {
                console.log("updatePart failed submit error: '"+error+"'");
                dispatch({type: UPDATE_PART_REJECTED, payload: error})
            })
    }
}

Но у меня есть сильное ощущение, что это неправильный способ маршрутизации для просмотра успешного асинхронного вызова в React + Redux.Пожалуйста, сообщите.

Answer 1

если в действии updatePart возвращается обещание, то вы можете использовать then в handleSubmit:

handleSubmit(event){
  event.preventDefault();
  let { part, updatePart } = this.props; // <-- ES6 destructuring

  updatePart(part).then(() => this.props.history.push('/home'));
  return false;
}

На updatePart добавление асинхронности возвращает обещание:

export async function updatePart(part)