Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Библиотека Redux Forms

Ещё одно место, напрашивающееся на автоматизацию — формы. Работа с формами в React настоящая головная боль. Каждый новый элемент требует синхронизации с состоянием и написанием дополнительного кода на всех уровнях.

import React from 'react';

class Form extends React.Component {
  updateNewTaskText = (e) =>
    this.props.updateNewTaskText({ text: e.target.value });

  render() {
    const { newTaskText } = this.props;

    return <form action="" className="form-inline">
      <div className="form-group mx-sm-3">
        <input type="text" required
          value={newTaskText} onChange={this.updateNewTaskText} />
      </div>
    </form>;
  }
}

Этого можно избежать, подключив библиотеку наподобие redux-form. Документация этого пакета поистине огромна. Множество вариантов использования и способов кастомизации. Чтобы не сойти с ума, в уроке мы рассмотрим только базовые возможности этой библиотеки.

Как и в случае с самим Redux, подключить Redux Form целая история. Начнём по порядку:

  1. Автоматизация синхронизации с контейнером подразумевает наличие специального редьюсера:

    import { reducer as formReducer } from 'redux-form';
    
    export default combineReducers({
      // По умолчанию свойство должно называться form
      form: formReducer,
      /* ... */
    });
    
  2. Теперь под каждую форму нужно выделять отдельный компонент и оборачивать его в компонент ReduxForm.

    import { reduxForm } from 'redux-form';
    
    class NewTaskForm extends React.Component {
      // ...
    }
    
    export default reduxForm({
      form: 'newTask',
    })(NewTaskForm);
    

    Обратите внимание на свойство form, оно задаёт имя ключа, под которым данные текущей формы будут храниться в Redux.

  3. Вместо использования стандартных компонентов React для элементов формы, Redux Form поставляется со своими механизмами. Потребность вполне понятная, иначе не сделать автоматическую синхронизацию.

    import  { Field } from 'redux-form';
    
    // ...
    
    render() {
      return <form className="form-inline">
        <div className="form-group mx-3">
          <Field name="text" required component="input" type="text" />
        </div>
        <button type="submit" className="btn btn-primary btn-sm">Add</button>
      </form>;
    }
    

    Эта часть Redux Form очень сильно кастомизируется. За подробностями прошу в официальную документацию.

  4. Остался последний шаг — отправка формы и работа с её данными.

    class NewTaskForm extends React.Component {
      addTask = (values) => {
        this.props.addTask({ task: values });
      }
    
      render() {
        return <form onSubmit={this.props.handleSubmit(this.addTask)}>
          {/* ... */}
          <button type="submit" className="btn btn-primary btn-sm">Add</button>
        </form>;
      }
    }
    

    Redux Form прокидывает в формы целую россыпь различных свойств. Главное из них — функция handleSubmit. Её необходимо вызвать на onSubmit формы, передав туда свой собственный обработчик. После отправки формы в этот обработчик попадут все значения из формы в виде объекта, где свойство — это имя элемента формы.

Теперь расширение и изменение любой формы станет настоящим праздником. Достаточно изменить саму форму и волшебным образом в обработчик начнут приходить новые данные.

А дальше начинаются нюансы:

  • Как очистить форму после отправки? В обработчике отправки можно вызывать функцию this.props.reset() и форма будет сброшена в первоначальный вид.

  • Как задать параметры по умолчанию? Достаточно передать в компонент пропс initialValues.


Дополнительные материалы

  1. redux-form

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу, нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».