Redux form — это библиотека, помогающая вам управлять состоянием компонента формы без создания каких-либо действий или редюсеров.
Прежде всего, вам нужно передать formReducer
в хранилище приложения, чтобы хранилище могло обрабатывать действия из компонента формы.
Затем создайте компонент, в котором будет вызываться ваша форма.
import React from 'react'; import LoginForm from './loginForm'; const Page = () => { const submit = values => { console.log('submit ', values); } return <LoginForm onSubmit={submit} />; } export default Page;
Теперь у нас есть страница с компонентом формы. Функция отправки будет создана здесь, а затем передана компоненту формы. При отправке формы отправленные данные будут переданы обратно в эту функцию.
Давайте создадим наш компонент формы!
- Функция
handleSubmit
— это функцияsubmit
, переданная через компонент Page. <Field />
поможет связать ваш компонент с магазином.- нам нужно обернуть форму
reduxForm
, чтобы компонент формы мог взаимодействовать с хранилищем.
Проверка формы
Вы также можете создать пользовательскую проверку с помощью избыточной формы как на стороне клиента, так и на стороне сервера.
Первое, что вам нужно сделать, это подготовить отрендеренный компонент, чтобы он мог обрабатывать ошибки. Ошибка каждого поля будет передана в реквизиты meta.
const FieldInput (type, input, meta:{touched, invalid, error}) => ( <div> <input {...input} type={type} /> {touched && invalid && error && <label>{error}</label>} </div> );
Для проверки на стороне клиента необходимо создать правила проверки, например, имя пользователя и пароль не должны быть пустыми, а пароль должен содержать не менее 4 символов. В противном случае вы не сможете отправить форму.
Вам также необходимо внедрить свою функцию validate
в reduxForm. Эта функция будет выполнена при отправке формы. Представленные данные будут переданы этой функции и проверены. Если есть какие-либо ошибки, redux-form отправит эти ошибки в это конкретное поле.
export default reduxForm({ form: 'loginForm', validate })(LoginForm);
Для проверки на стороне сервера вы можете обрабатывать их в функции отправки с помощью SubmissionError
. Например, ваш пароль должен быть «пароль».
import { SubmissionError } from 'redux-form'; const submit = values => { // simulate server behavior if (values.password !== 'password') { throw new SubmissionError({ _error: 'your login is failed', password: 'invalid' }); } else { console.log('submit ', values); } }
вы можете найти полный исходный код здесь.