Обработка ошибок AJAX с помощью формы Redux

Я новичок в React/Redux, поэтому я создаю простое приложение для блога с Redux Form, чтобы помочь мне учиться. Прямо сейчас я не понимаю, как я буду обрабатывать ошибки ajax при отправке данных из формы в API в моем действии. Основная проблема заключается в том, что я использую свойство конфигурации onSubmitSuccess формы Redux, и оно, кажется, всегда вызывается, даже когда возникает ошибка. Я действительно не понимаю, что вызывает onSubmitSuccess или onSubmitFail. Моя функция onSubmitFail никогда не выполняется, но моя функция onSubmitSuccess выполняется всегда, независимо от того, произошла ошибка или нет.

Я читал об SubmissionError в документации по redux-form, но в нем говорится, что цель этого - "отличить отклонение обещания из-за ошибок проверки от отклонения обещания из-за ввода-вывода AJAX". Итак, похоже, это противоположно тому, что мне нужно.

Я использую redux-promise в качестве промежуточного программного обеспечения с Redux, если это имеет значение.

Вот мой код. Я намеренно выбрасываю ошибку в API моего сервера, чтобы сгенерировать ошибку в моем действии createPost:

Контейнер с моей редукционной формой

PostsNew = reduxForm({
  validate,
  form: 'PostsNewForm',
  onSubmit(values, dispatch, props) {
    // calling my createPost action when the form is submitted.
    // should I catch the error here?
    // if so, what would I do to stop onSubmitSuccess from executing?
    props.createPost(values)
  }
  onSubmitSuccess(result, dispatch, props) {
    // this is always called, even when an exeption occurs in createPost()
  },
  onSubmitFail(errors, dispatch) {
    // this function is never called
  }
})(PostsNew)

Действие, вызванное onSubmit

export async function createPost(values) {
  try {
    const response = await axios.post('/api/posts', values)
    return {
      type: CREATE_POST,
      payload: response
    }
  } catch (err) {
    // what would I do here that would trigger onSubmitFail(),
    // or stop onSubmitSuccess() from executing?
  }
}

reactjs redux redux-form
person Adam    schedule 13.10.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

В вашем случае redux-form не знает, была ли отправка формы успешной или нет, потому что вы не возвращаете обещание из функции onSubmit.

В вашем случае этого можно добиться без использования redux-promise или любой другой библиотеки асинхронной обработки:

PostsNew = reduxForm({
  validate,
  form: 'PostsNewForm',
  onSubmit(values, dispatch, props) {
    // as axios returns a Promise, we are good here
    return axios.post('/api/posts', values);
  }
  onSubmitSuccess(result, dispatch, props) {
    // if request was succeeded(axios will resolve Promise), that function will be called
    // and we can dispatch success action
    dispatch({
      type: CREATE_POST,
      payload: response
    })
  },
  onSubmitFail(errors, dispatch) {
    // if request was failed(axios will reject Promise), we will reach that function
    // and could dispatch failure action
    dispatch({
      type: CREATE_POST_FAILURE,
      payload: errors
    })
  }
})(PostsNew)
person 1ven    schedule 14.10.2017
comment
Это прекрасно работает. По какой-то причине я предположил, что такие вещи, как вызовы ajax, должны обрабатываться только внутри ваших действий. Я не думал делать это внутри моей функции onSubmit. - person Adam; 15.10.2017

arrow_upward
1
arrow_downward

Для обработки асинхронных действий вы должны использовать redux-thunk, redux-saga или другое промежуточное ПО, позволяющее запускать асинхронный код.

person floriangosse    schedule 13.10.2017
comment
Я знаю, что использование промежуточного программного обеспечения — лучший подход для обработки асинхронных действий. Я не знаю, заметили ли вы, что я сказал, что использую промежуточное программное обеспечение с обещанием сокращения в своем вопросе? Вместо этого я мог бы использовать redux-thunk, но моя проблема в том, что я не знаю, что делать, чтобы обработать ошибку при использовании этого промежуточного программного обеспечения. Я не знаю, что отменит функцию onSubmitSuccess, которую я настроил с помощью redux-form, или что вместо этого сработает onSubmitFail. Вопрос в том, как конкретно обрабатывать ошибки с редукционной формой. - person Adam; 13.10.2017