Создание реактивных форм в React с помощью Formik
месяц назад·1 мин. на чтение
В этой статье мы покажем, как использовать библиотеку Formik для создания реактивных форм в React.
Formik - это библиотека для управления формами в React. Она предоставляет мощные инструменты для обработки ввода данных, валидации и отправки формы на сервер. В этой статье мы рассмотрим, как использовать Formik для создания реактивных форм в функциональных компонентах React.
Импорт
После установки
Полезные свойства и методы
Formik предоставляет множество полезных свойств и методов для управления формой. Некоторые из них:
Установка 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 - это мощная и гибкая библиотека для создания реактивных форм в React. Она предоставляет все необходимые инструменты для управления формами, валидации и отправки данных. В этой статье мы рассмотрели основы использования Formik в функциональных компонентах React. Теперь вы можете применить эти знания в своих проектах и создавать интерактивные и удобные формы.Одна из причин за что НЕ любят Redux
2 года назад·4 мин. на чтение
Зачем вообще нужно глобальное хранилище? Действительно ли наши веб-приложения настолько сложны, или мы пытаемся их переусложнить, используя Redux?
Redux был революционной технологией в экосистеме React. Это позволило нам иметь глобальное хранилище и устранило проблему prop drilling в нашем дереве компонентов. Для совместного использования иммутабельных данных в приложении он по-прежнему остается отличным инструментом, который очень хорошо масштабируется.
Граница между ответственностью бэкэнда и фротенда быстро стирается, когда мы начинаем воссоздавать базу данных на фротенде . Как фротенд-разработчикам, нам не нужно досконально разбираться в таблицах и их связях, чтобы создать простой пользовательский интерфейс. Нам также не нужно знать, как лучше всего нормализовать наши данные. Эта ответственность должна лежать на людях, которые сами проектируют таблицы — на бэкэнд-разработчиках. Бэкенд-разработчики затем могут предоставить абстракцию для фронтенд-разработчиков в виде документированного API.
В настоящее время существует множество библиотек (redux-observable, redux-saga и redux-thunk, и это лишь некоторые из них), построенных вокруг Redux, чтобы помочь нам управлять данными из бэкэнда, каждая из которых добавляет уровень сложности к уже и так сложной для инициализации библиотеке. Иногда нам нужно сделать шаг назад, прежде чем сделать шаг вперед.
Чтобы сравнить эту библиотеку с Redux, рассмотрим пример двух методов. Для примера используем простой список TODO, полученный с сервера.
Реализация с Redux.
Обратите внимание, что в этом коде еще даже нет повторной выборки данных, кэширования и инвалидации кэша. Это просто загрузка данные и сохранение их в глобальное хранилище.
Вот тот же пример, реализованный с помощью React Query.
По умолчанию код с React Query уже включают повторную выборку данных, кэширование и инвалидацию устаревших данных с предустановленной конфигурацией. Можно также установить конфигурацию кэширования на глобальном уровне.
Везде, где вам нужны эти данные, теперь вы можете использовать хук useQuery с уникальным ключом, который вы установили (в данном случае
Проблема одностраничных приложений
Появление фреймворков для создания одностраничных приложений (SPA), например, React, внесло множество изменений в то, как мы разрабатываем веб-приложения. Сильное разделение бэкэнда и фронтенда позволило нам сфокусироваться и разделить задачи между командами. Это также внесло много сложностей, особенно в сопровождении состояния веб-приложения. Асинхронный запрос данных теперь означает, что данные должны находиться в двух местах: во фронтенде и на бекенде. Мы должны подумать о том, как лучше всего хранить эти данные глобально, чтобы они были доступны для всех наших компонентов, сохраняя при этом кэш данных для экономии времени на частых запросах. Большая часть разработки фронтенда теперь включает поддержку глобального хранилища - денормализации данных, устаревание данных и различные специфические баги.Redux - это не кэш
Основная проблема, с которой сталкивается большинство из нас при использовании Redux и подобных библиотек управления состоянием, заключается в том, что мы рассматриваем его как кэш для нашего внутреннего состояния. Мы извлекаем данные, добавляем их в наше хранилище с помощью редьюсера/экшена и периодически обновляем их, чтобы убедиться, что они актуальны. Мы заставляем Redux делать слишком много и используем его как универсальное решение наших проблем. Одна важная вещь, которую следует помнить, это то, что данные на фронтенде и на бэкэнде никогда не синхронизированы по настоящему, это лишь иллюзия. Это один из недостатков модели клиент-сервер, и именно поэтому нам нужен кэш. Однако кэширование и синхронизация состояния чрезвычайно сложны, поэтому мы не должны воссоздавать это состояние бэкэнда с нуля.Более простой подход к хранению данных с бэкэнда
Есть пара библиотек, которые обладают преимуществами перед Redux (или аналогичной библиотекой управления состоянием) для хранения состояния бэкэнда.React Query
Это библиотека с очень простым API и парой хуков для управления запросами (выборка данных) и мутациями (изменение данных). Благодаря использованию React Query удается писать гораздо меньше шаблонного кода, чем с Redux. Становится проще сосредоточиться на UI/UX веб-приложения, не заботясь о проблемах поддержки состояния бэкэнда.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> ); };
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; };
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();