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);
  }
}

вы можете найти полный исходный код здесь.