Рекомендации, которые помогут вам контролировать свое здравомыслие при разработке приложений React с большим количеством форм.

После двух лет разработки приложений React на ProductReview.com.au, я думаю, пришло время поделиться нашим опытом и инструментами, которые мы приняли, чтобы повысить продуктивность работы с формами. Я не буду вдаваться в подробности об опыте пользователей в этом посте, потому что считаю, что уже доступно много хорошего контента.

Примечание: на момент написания последней версии redux-form была v7.3.0.

Обернуть сторонний код

В масштабном проекте очень важно создать собственный интерфейс для использования сторонних библиотек. Это дает вам свободу изменений. Вначале это не кажется таким полезным, но как только вам придется ввести функцию, которую библиотека не поддерживает, это сэкономит вам часы рефакторинга. Это часто называют шаблоном адаптера.

Вместо использования HTML-тегов, таких как <div> в React, мы скрываем их в <Box>, <Text>, <Image> и так далее. Таким образом, мы можем использовать больше имен семантических свойств и, например, если базовая реализация стиля изменится с необработанных имен классов на стилизованные компоненты или если мы хотим использовать те же компоненты в React Native, API не изменится. Существует несколько библиотек компонентов пользовательского интерфейса, следующих этой философии, таких как Rebass, Cloudfare UI и Atlaskit.

Такой же узор можно применить и к формам. Вместо того, чтобы импортировать вещи из redux-form, импортируйте их из файла в каталоге вашего проекта, например forms/index.js, и наслаждайтесь свободой!

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

Будьте откровенны

Не скрывайте слишком многое из поведения ваших компонентов. Такие библиотеки, как React и redux-form, уже многое делают для нас, но, по крайней мере, они хорошо известны и хорошо документированы, а это означает, что большинство людей быстро поймут их идеи. С вашим проектом все могло быть иначе. В конце нужно больше печатать, но, по крайней мере, вы будете точно знать, что происходит, когда проверяете исходный код.

Хорошо, что вы имеете в виду на практике?

Представьте, что вам нужно отобразить сообщение об ошибке после неудачной отправки формы. Многие люди будут склонны создать компонент Form, который будет выполнять это автоматически. Проблемы с этим:

  • Новым разработчикам будет сложно понять, что происходит, или даже вам через некоторое время, не касаясь кода.
  • Вы не видите, где будет отображаться ошибка
  • Его сложнее настроить. Возможно, вы хотите вместо этого отобразить всплывающее уведомление. Если вы начнете толкать много свойств настройки, он может быстро превратиться в монстра

Успех React во многом объясняется наличием небольшого и явного API (о, старые тяжелые времена двухдневной привязки данных 😢). Так что перестраховывайтесь и убедитесь, что ваша форма описывает все свое поведение.

Условные поля

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

Это удобно и производительно, потому что не будет повторно отображать всю форму при изменении значения. Этот компонент поддерживает FormSection, поэтому вам не нужно беспокоиться о том, находитесь ли вы внутри него или нет. В идеале такая утилита должна предоставляться библиотекой, поскольку она использует внутренний API, но у меня не было времени отправить правильный запрос на перенос.

Проверка

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

Формирует состав

О, это интересная тема! К счастью, с появлением FormSection все стало более элегантно, но с нашей стороны еще есть над чем поработать. Мы создаем группы полей, такие как BillingAddressFields или PaymentMethodFields, которые экспортируют все, что связано с их поведением (проверка, анализ значений и т. Д.), Чтобы их можно было составить на корневом уровне ( актуальная форма). В итоге это выглядит так:

Очистить значение при отключении поля

Это может настолько раздражать, что заслуживает большого заголовка здесь, в посте. Это очень полезно, когда у вас есть условные поля. Сделайте это правильно с самого начала и создайте оболочку вокруг поля (помните раздел Перенос стороннего кода выше?) С необязательным свойством clearOnUnmount:

Значения полей по умолчанию

Это очень распространенный случай, но будьте осторожны, потому что родительский компонент может захотеть передать начальные значения. Вы можете объединить их вместе с @connect():

Отправить при изменении

Вы устали искать в Google решения, которые действительно работают? Мы разработали декоратор, который занимается этим:

Серверный рендеринг

Ничто не идеально. Получение правильного рендеринга на стороне сервера - очень сложная задача, и если это важно для вашего приложения, как для нашего, установите это промежуточное ПО Redux, которое должно исправить несколько проблем.

Таким образом, redux-form - это проверенная в боях библиотека, которая находится в активной разработке, что дает нам уверенность. Я хотел бы поблагодарить Эрика Расмуссема и всех участников библиотеки, а также моего коллегу Йориса Гароняна (за содействие в написании явного кода и инкапсуляции). С помощью некоторых настроек мы можем создавать мощные формы, которые будут чистыми и удобными в обслуживании.

Кстати, набираем! Если вы готовы решать большие задачи с помощью крутых технологий в солнечном и красивом Сиднее, напишите нам свое резюме по адресу [email protected].

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

Следите за нашей публикацией, чтобы увидеть больше историй о продуктах и ​​дизайне, представленных командой Journal.