Создание реактивных форм в React с помощью Formik

Formik - это библиотека для управления формами в React. Она предоставляет мощные инструменты для обработки ввода данных, валидации и отправки формы на сервер. В этой статье мы рассмотрим, как использовать Formik для создания реактивных форм в функциональных компонентах React.

Установка Formik

Прежде чем начать, нам нужно установить Formik. Вы можете сделать это, выполнив следующую команду:

npm install formik

Импорт Formik и необходимых компонентов

После установки Formik мы можем импортировать его и необходимые компоненты в нашем функциональном компоненте:

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";

Создание формы

Для создания формы мы будем использовать компонент Formik. Он принимает объект с начальными значениями полей формы, функцию обработчика отправки формы и другие необязательные свойства.

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: "", email: "" }}
      onSubmit={(values) => {
        // Обработка отправки формы
        console.log(values);
      }}
    >
      <Form>
        {/* Поля формы */}
      </Form>
    </Formik>
  );
};

Добавление полей формы

Для добавления полей формы мы используем компонент Field. Он принимает имя поля, тип и другие свойства. Мы также можем использовать компонент ErrorMessage для отображения сообщений об ошибках.

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: "", email: "" }}
      onSubmit={(values) => {
        // Обработка отправки формы
        console.log(values);
      }}
    >
      <Form>
        <div>
          <label htmlFor="name">Имя:</label>
          <Field type="text" id="name" name="name" />
          <ErrorMessage name="name" component="div" />
        </div>

        <div>
          <label htmlFor="email">Email:</label>
          <Field type="email" id="email" name="email" />
          <ErrorMessage name="email" component="div" />
        </div>

        <button type="submit">Отправить</button>
      </Form>
    </Formik>
  );
};

Валидация формы

Formik также предоставляет удобные средства для валидации формы. Мы можем определить функцию валидации и передать ее в качестве свойства validate в компонент Formik.

const validateForm = (values) => {
  const errors = {};

  if (!values.name) {
    errors.name = "Поле Имя обязательно для заполнения";
  }

  if (!values.email) {
    errors.email = "Поле Email обязательно для заполнения";
  }

  return errors;
};

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: "", email: "" }}
      validate={validateForm}
      onSubmit={(values) => {
        // Обработка отправки формы
        console.log(values);
      }}
    >
      {/* ... */}
    </Formik>
  );
};

Обработка отправки формы

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

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: "", email: "" }}
      validate={validateForm}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          // Симуляция отправки формы
          console.log(values);
          setSubmitting(false);
        }, 2000);
      }}
    >
      {/* ... */}
    </Formik>
  );
};

Полезные свойства и методы Formik

Formik предоставляет множество полезных свойств и методов для управления формой. Некоторые из них:

• values - объект, содержащий значения полей формы
• errors - объект, содержащий ошибки валидации
• touched - объект, содержащий информацию о том, каких полей "коснулся" пользователь
• handleChange - функция для обновления значения поля при его изменении
• handleBlur - функция для отслеживания "прикосновений" к полю
• isSubmitting - флаг, указывающий, отправляется ли форма в данный момент
• isValidating - флаг, указывающий, происходит ли валидация формы в данный момент
• resetForm - метод для сброса значений полей формы

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

Итоги

Formik - это мощная и гибкая библиотека для создания реактивных форм в React. Она предоставляет все необходимые инструменты для управления формами, валидации и отправки данных. В этой статье мы рассмотрели основы использования Formik в функциональных компонентах React. Теперь вы можете применить эти знания в своих проектах и создавать интерактивные и удобные формы.

Redux был революционной технологией в экосистеме React. Это позволило нам иметь глобальное хранилище и устранило проблему prop drilling в нашем дереве компонентов. Для совместного использования иммутабельных данных в приложении он по-прежнему остается отличным инструментом, который очень хорошо масштабируется.

Проблема одностраничных приложений

Появление фреймворков для создания одностраничных приложений (SPA), например, React, внесло множество изменений в то, как мы разрабатываем веб-приложения. Сильное разделение бэкэнда и фронтенда позволило нам сфокусироваться и разделить задачи между командами. Это также внесло много сложностей, особенно в сопровождении состояния веб-приложения. Асинхронный запрос данных теперь означает, что данные должны находиться в двух местах: во фронтенде и на бекенде. Мы должны подумать о том, как лучше всего хранить эти данные глобально, чтобы они были доступны для всех наших компонентов, сохраняя при этом кэш данных для экономии времени на частых запросах. Большая часть разработки фронтенда теперь включает поддержку глобального хранилища - денормализации данных, устаревание данных и различные специфические баги.

Redux - это не кэш

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

Граница между ответственностью бэкэнда и фротенда быстро стирается, когда мы начинаем воссоздавать базу данных на фротенде . Как фротенд-разработчикам, нам не нужно досконально разбираться в таблицах и их связях, чтобы создать простой пользовательский интерфейс. Нам также не нужно знать, как лучше всего нормализовать наши данные. Эта ответственность должна лежать на людях, которые сами проектируют таблицы — на бэкэнд-разработчиках. Бэкенд-разработчики затем могут предоставить абстракцию для фронтенд-разработчиков в виде документированного API. В настоящее время существует множество библиотек (redux-observable, redux-saga и redux-thunk, и это лишь некоторые из них), построенных вокруг Redux, чтобы помочь нам управлять данными из бэкэнда, каждая из которых добавляет уровень сложности к уже и так сложной для инициализации библиотеке. Иногда нам нужно сделать шаг назад, прежде чем сделать шаг вперед.

Более простой подход к хранению данных с бэкэнда

Есть пара библиотек, которые обладают преимуществами перед Redux (или аналогичной библиотекой управления состоянием) для хранения состояния бэкэнда.

React Query

Это библиотека с очень простым API и парой хуков для управления запросами (выборка данных) и мутациями (изменение данных). Благодаря использованию React Query удается писать гораздо меньше шаблонного кода, чем с Redux. Становится проще сосредоточиться на UI/UX веб-приложения, не заботясь о проблемах поддержки состояния бэкэнда.

Чтобы сравнить эту библиотеку с Redux, рассмотрим пример двух методов. Для примера используем простой список TODO, полученный с сервера. Реализация с Redux.

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import axios from 'axios';

const SET_TODOS = "SET_TODOS";

export const rootReducer = (state = { todos: [] }, action) => {
  switch (action.type) {
    case SET_TODOS:
      return { ...state, todos: action.payload };
    default:
      return state;
  }
};

export const App = () => {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  useEffect(() => {
    const fetchPosts = async () => {
      const { data } = await axios.get("/api/todos");
      dispatch({
        type: SET_TODOS,
        payload: data
      });
    };

    fetchPosts();
  }, []);

  return (
    <ul>{todos.length > 0 && todos.map((todo) => <li>{todo.text}</li>)}</ul>
  );
};

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

import React from "react";
import { useQuery } from "react-query";
import axios from "axios";

const fetchTodos = async () => {
  const { data } = await axios.get("/api/todos");
  return data;
};

const App = () => {
  const { data } = useQuery("todos", fetchTodos);

  return data ? (
    <ul>{data.length > 0 && data.map((todo) => <li>{todo.text}</li>)}</ul>
  ) : null;
};

По умолчанию код с React Query уже включают повторную выборку данных, кэширование и инвалидацию устаревших данных с предустановленной конфигурацией. Можно также установить конфигурацию кэширования на глобальном уровне. Везде, где вам нужны эти данные, теперь вы можете использовать хук useQuery с уникальным ключом, который вы установили (в данном случае todos), и асинхронным вызовом для получения данных. Пока функция асинхронная, реализация не имеет значения — вы можете так же легко использовать Fetch API вместо Axios. Для изменения внутреннего состояния React Query предоставляет хук useMutation.

SWR

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

Apollo Client

SWR и React Query ориентированы на REST API, но если вам нужно что-то подобное для GraphQL, то явным претендентом является Apollo Client. Также приятно, что синтаксис почти идентичен React Query.

Встроенные возможности для работы с состоянием

Как только вы начнете использовать одну из этих библиотек, вы обнаружите, что в подавляющем большинстве проектов Redux является излишним. Когда не придется самим заниматься запросом и кешированием данных в веб-приложении, на фронтенде останется лишь небольшая часть глобального состояния. То немногое, что осталось, можно обработать с помощью Context API или useContext + useReducer, чтобы создать свой собственный псевдо-Redux. Или, что еще лучше, для простых кейсов можно использовать встроенное состояние React.

// чисто, красиво и просто
const [состояние, setState] = useState();