Работа с формами иногда может быть проблематичной. Вам нужно позаботиться о таких вещах, как проверка, правильный тип полей и т. Д. Более того, при разработке форм в React и Redux вам необходимо сохранить информацию о форме в магазине. Redux Form - довольно удобный способ упростить и ускорить реализацию форм. В этом уроке мы создадим примерную форму и посмотрим, как мы можем работать с различными типами входных данных. Формы Redux, Immutable и Redux Immutable должны быть добавлены к вашим зависимостям (npm i redux-form immutable redux-immutable). Также понадобится библиотека Рамда.
Во-первых, давайте создадим настраиваемый компонент ввода текста / числа:
Затем давайте посмотрим, как мы можем реализовать ввод типа радио:
Главный компонент:
Мы используем функцию renderInputComponent за пределами основного компонента, чтобы избежать повторного рендеринга формы во время набора текста (это распространенная проблема, которая может привести к потере фокуса поля после ввода первого символа). destroyOnUnmount предотвратит размонтирование формы, когда мы, например, перейдем на другую вкладку с помощью маршрутизатора. Мы должны указать название формы для регистрации в магазине. onSubmitFail отправит некоторое действие, если форма не заполнена должным образом, onSubmit проверит
правильность формы и, наконец, onSubmitSuccess в случае успеха отправит какое-то действие. Обратите внимание, что в рамках этих функций у нас есть
доступ к различным параметрам, таким как ошибки и значения.
Необходимо упомянуть, что для правильной работы Redux Form требуется импорт соответствующей версии редуктора в функцию combReducers:
Вы, наверное, заметили, что мы обрабатываем проверку формы с помощью функции validate. Давайте реализуем это:
Мы используем функцию Ramda isNil, чтобы определить, имеет ли поле какое-либо значение. Итак, в основном мы получаем поля из формы Redux (на которую ссылается имя) и выполняем некоторые проверки. Если проверка не удалась, мы добавляем ошибки в объект ошибок, который мы будем использовать позже для их перечисления.
У нас есть некоторые действия, связанные с ключами onSubmitSuccess и onSubmitFail, поэтому давайте их реализуем:
Следующий шаг - обработать их в редукторе (не забудьте добавить его в функцию rootReducer):
Здесь нам нужно только одно свойство - formHasErrors - которое будет изменено в зависимости от неудачной или успешной проверки и изначально установлено в false. Мы будем работать с этим значением в компоненте, поэтому нам понадобится способ использовать его там. Следовательно, нужны селекторы, чтобы брать это значение прямо из состояния:
Здесь также представлен getFormErrorsSelector, и мы будем использовать его для обработки всех ошибок формы. Напишем функцию, которая принимает ошибки и выводит их на экран в удобочитаемой форме. Функция будет использоваться в компоненте:
Мы написали код и создали новые файлы, которые необходимы в файле компонента, поэтому давайте посмотрим его окончательный вид:
Вот как выглядит пустая отрисованная форма:
Форма зарегистрирована в магазине:
Теперь давайте заполним форму некоторыми ошибками, оставим некоторые поля пустыми и посмотрим, что проверка работает правильно:
Вроде все нормально. Похоже, что это те ошибки, которые мы объявили в функции проверки. Как упоминалось ранее, ошибки принимаются через селектор
Это работает, потому что Redux Form обновил состояние с помощью объекта submitErrors:
Redux Form - вещь нетривиальная, и я помню, что мой первый контакт с ней был довольно пугающим, но
Redux Form значительно улучшает работу с формами и - после приручения - является мощным инструментом для работы с формами в React.
Все файлы из этого туториала можно найти на моем GitHub.
