Вручную установите поле redux-form и / или ошибки формы

Question

Вручную установите поле redux-form и / или ошибки формы

Я знаю, что если вы бросите SubmissionError из своей функции handleSubmit(), код redux-form заполнит ошибки соответствующих полей и/или самой формы.

Тем не менее, этот API установки ошибок поля/формы, тесно связывает нашу реализацию handleSumbit(), чтобы быть вызывающим кодом redux-form (который содержит обработчик исключений SubmissionError).

Мой вариант использования должен быть примерно таким:

function asyncActionDispatcher(values) {                                     

  return (dispatch, getState) => {                                           

    // I'm using getState, which is not accessible in handleSubmit()         

    // But I'd also like to be able to set errors on the form fields and/or the

    // form.                                                                 

  };                                                                         

}                                                                            



function handleSubmit(values, dispatch) {                                    

  dispatch(                                                                  

    asyncActionDispatcher(values)                                            

  );                                                                         

}

Я не могу бросить SubmissionError в asyncActionDispatcher(), потому что он называется redux и не redux-form.

Есть ли у redux-form другой API для установки ошибок в полях / формах?

833 3

reactjs redux react-redux redux-thunk redux-form

3 ответов:

Comments

Ничего не найдено.

jakee · Accepted Answer · 2017-02-08 01:27:33

Да, это так.

Вы можете использовать validate и asyncValidate реквизиты для установки функций валидатора для значений вашей формы (синхронных и асинхронных соответственно).

validate должна быть функция, которая либо возвращает пустой объект, если проверки проходят, либо объект, детализирующий ошибки проверки в виде { someField: 'some error', otherField: 'other error' }

asyncValidate с другой стороны, должен возвращать Promise, который обычно разрешается, если проверки проходят или отклоняется с объектом, детализирующим ошибки проверки (см. выше), если проверки не проходят.

handleSubmit реализован таким образом, что он выполняет как синхронные, так и асинхронные проверки перед вызовом onSubmit, поэтому, если вы настроили validate и asyncValidate, эти ошибки должны появиться в вашей форме/полях автоматически без какой-либо дополнительной работы.

Надеюсь, это поможет!

Обновление:

Вы также можете просто подождать, пока asyncActionDispatcher не закончит и продолжить отправку или отклонение с SubmissionError в зависимости от того, какие результаты так оно и было.
function asyncActionDispatcher(values) {
  return (dispatch, getState) => {
    if (success) {
      return Promise.resolve('success')
    } else {
      return Promise.reject('error')
    }
  }
}

function onSubmit(values, dispatch) {
  // dispatch whatever action you need to dispatch
  return dispatch(asyncActionDispatcher(values))
    .then(() => {
      // i guess you need to do your actual submitting here
    })
    .catch(error => {
      return new SubmissionError({ _error: 'whatever you want here' })
    })
}

// and in the component
<form onSubmit={ handleSubmit(onSubmit) }> ... </form>
Источники: Redux-Form docs, завернутый компонент реквизит документация, пример синхронной проверки, пример асинхронной проверки

pleasedesktop · Accepted Answer · 2017-02-08 00:50:58

Ваш handleSubmit() называется так:
handleSubmit(values, dispatch, props)
...где одним из свойств этого объекта props является функция stopSubmit().

Это то, что вы хотите использовать, где это API похоже на то, как описано здесь:
stopSubmit(form:String, errors:Object)
// Flips the submitting flag false and populates submitError for each field.
Вам нужно будет указать уникальный строковый идентификатор form при импорте этой функции самостоятельно и ее использовании, но если вы используете версию past для вашего handleSubmit() (через объект props), то вам не нужно предоставлять аргумент для первого параметр.

Neil Girardi · Accepted Answer · 2018-05-06 22:09:14

Я бросаю SubmissionError из .catch() обратного вызова axios, который вызывается изнутри thunk, поэтому я думаю, что вы должны быть в состоянии сделать то же самое из ReduxSaga. Просто убедитесь, что return, чтобы вы не получили необнаруженную ошибку исключения. В моем случае thunk возвращает вызов axios, а внутри .handleSubmit() я возвращаю thunk.