React experimental_useFormState: Комплексний посібник із покращеної обробки форм

Екосистема React, що постійно розвивається, постійно представляє інноваційні інструменти для покращення досвіду розробників та продуктивності додатків. Одним із таких досягнень є хук experimental_useFormState. Цей хук, який зараз перебуває на експериментальній стадії, забезпечує потужний та оптимізований підхід до управління станом форми та обробки асинхронних дій, особливо в поєднанні з серверними компонентами та діями React. Цей посібник заглибиться в тонкощі experimental_useFormState, досліджуючи його переваги, випадки використання та стратегії реалізації.

Що таке experimental_useFormState?

Хук experimental_useFormState розроблений для спрощення управління формами в межах додатків React. Він пропонує декларативний спосіб обробки стану форми, помилок та асинхронних відправок. На відміну від традиційних методів, які часто включають ручне оновлення стану та складну обробку подій, experimental_useFormState спрощує цей процес, надаючи єдиний хук для управління всім життєвим циклом форми.

По суті, experimental_useFormState дозволяє вам пов’язати значення стану з функцією, яка виконує логіку надсилання форми. Ця функція, зазвичай серверна дія в контексті серверних компонентів React, відповідає за перевірку даних та виконання необхідних мутацій. Потім хук управляє станом виконання цієї функції, надаючи користувачеві відгук про стан форми (наприклад, завантаження, успіх, помилка).

Переваги використання experimental_useFormState

• Спрощена логіка форми: Зменшує шаблонний код, централізуючи управління станом форми в межах одного хука.
• Покращена продуктивність: Оптимізує рендеринг, мінімізуючи непотрібні оновлення та використовуючи мутації даних на стороні сервера.
• Декларативний підхід: Сприяє більш читабельному та зручному для підтримки коду завдяки декларативному стилю програмування.
• Безшовна інтеграція з серверними діями: Розроблений для безперебійної роботи з серверними компонентами та діями React, що забезпечує ефективне отримання даних та мутації.
• Покращений досвід користувача: Забезпечує чіткий та лаконічний відгук користувачеві щодо стану форми, покращуючи загальний досвід користувача.

Випадки використання experimental_useFormState

Хук experimental_useFormState особливо добре підходить для сценаріїв, що включають складні форми, які вимагають перевірки на стороні сервера та мутацій даних. Ось кілька поширених випадків використання:

• Форми автентифікації: Обробка форм реєстрації користувачів, входу в систему та скидання пароля.
• Форми електронної комерції: Обробка форм оформлення замовлення, оновлення профілів користувачів та управління списками продуктів.
• Системи управління контентом (CMS): Створення та редагування статей, управління ролями користувачів та налаштування параметрів веб-сайту.
• Платформи соціальних мереж: Публікація оновлень, надсилання коментарів та управління профілями користувачів.
• Форми введення даних: Захоплення та перевірка даних із різних джерел, таких як опитування, форми зворотного зв’язку та інформація про клієнтів.

Приклад реалізації: Проста контактна форма

Проілюструємо використання experimental_useFormState на практичному прикладі: проста контактна форма. Ця форма збиратиме ім’я користувача, електронну пошту та повідомлення, а потім надсилатиме дані серверній дії для обробки.

1. Визначте серверну дію

Спочатку нам потрібно визначити серверну дію, яка обробляє подання форми. Ця дія перевірятиме дані та надсилатиме сповіщення електронною поштою.

```javascript // app/actions.js 'use server'; import { revalidatePath } from 'next/cache'; import { sendEmail } from './utils/email'; // Приклад функції надсилання електронної пошти export async function submitContactForm(prevState, formData) { const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); // Базова перевірка if (!name || !email || !message) { return 'Будь ласка, заповніть усі поля.'; } try { await sendEmail({ to: 'admin@example.com', // Замініть на свою електронну пошту адміністратора subject: 'Надсилання нової контактної форми', text: `Ім'я: ${name}\nЕлектронна пошта: ${email}\nПовідомлення: ${message}`, }); revalidatePath('/'); // Повторно перевірте головну сторінку або відповідний шлях return 'Дякуємо за ваше повідомлення!'; } catch (error) { console.error('Помилка надсилання електронної пошти:', error); return 'Виникла помилка. Будь ласка, спробуйте пізніше.'; } } ```

Пояснення:

• Директива 'use server' вказує, що ця функція повинна виконуватися на сервері.
• Функція отримує попередній стан (prevState) та дані форми (formData) як аргументи.
• Він витягує ім’я, електронну пошту та повідомлення з даних форми.
• Він виконує базову перевірку, щоб переконатися, що всі необхідні поля заповнені.
• Він використовує асинхронну функцію sendEmail (яку вам потрібно буде реалізувати окремо) для надсилання сповіщення електронною поштою. Це може використовувати такий сервіс, як SendGrid, Mailgun або AWS SES.
• revalidatePath('/') змушує Next.js повторно отримати дані для головної сторінки, гарантуючи, що будь-які відповідні зміни будуть відображені негайно.
• Він повертає повідомлення про успіх або помилку, щоб оновити стан форми.

2. Реалізуйте компонент React

Тепер давайте створимо компонент React, який використовує experimental_useFormState для управління станом форми та обробки надсилання.

```javascript 'use client'; import { experimental_useFormState as useFormState } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); return (

Ім'я:

Електронна пошта:

Повідомлення: </div> <button type="submit">Надіслати</button> {state && <p>{state}</p>} </form> ); } export default ContactForm; ``` <p><b>Пояснення:</b></p> <ul> <li>Директива <code>'use client'</code> вказує, що цей компонент є клієнтським компонентом.</li> <li>Ми імпортуємо <code>experimental_useFormState</code> як <code>useFormState</code> для стислості та дію <code>submitContactForm</code>.</li> <li>Ми викликаємо <code>useFormState</code>, передаючи дію <code>submitContactForm</code> та початковий стан <code>null</code>.</li> <li>Хук повертає поточний стан (<code>state</code>) і функцію (<code>formAction</code>), яка запускає надсилання форми.</li> <li>Ми прикріплюємо функцію <code>formAction</code> до властивості <code>action</code> елемента <code>form</code>. Це має вирішальне значення для правильної обробки React подання форми.</li> <li>Форма включає поля введення для імені, електронної пошти та повідомлення, а також кнопку надсилання.</li> <li>Рядок <code>{state && <p>{state}</p>}</code> відображає поточний стан (повідомлення про успіх або помилку) для користувача.</li> </ul> <h3>3. Налаштування служби надсилання електронної пошти (приклад sendEmail)</h3> <p>Вам потрібно буде реалізувати функцію <code>sendEmail</code>. Ось приклад використання Nodemailer з обліковим записом Gmail (Примітка: Загалом не рекомендується використовувати Gmail безпосередньо у виробництві. Використовуйте спеціальну службу електронної пошти, таку як SendGrid, Mailgun або AWS SES, для виробничих середовищ.):</p> ```javascript // app/utils/email.js import nodemailer from 'nodemailer'; export async function sendEmail({ to, subject, text }) { // Створіть об’єкт транспортера за допомогою Gmail SMTP const transporter = nodemailer.createTransport({ service: 'gmail', auth: { user: 'your_gmail_address@gmail.com', // Замініть на свою адресу Gmail pass: 'your_gmail_password', // Замініть своїм паролем Gmail або паролем програми }, }); // Визначте параметри електронної пошти const mailOptions = { from: 'your_gmail_address@gmail.com', to: to, subject: subject, text: text, }; // Надішліть електронний лист try { await transporter.sendMail(mailOptions); console.log('Електронний лист надіслано успішно'); } catch (error) { console.error('Помилка надсилання електронної пошти:', error); throw error; // Повторно створіть помилку, щоб її було перехоплено в серверній дії } } ``` <p><b>Важливе зауваження щодо безпеки:</b> Ніколи не фіксуйте свій фактичний пароль Gmail безпосередньо у своїй кодовій базі! Використовуйте змінні середовища для зберігання конфіденційної інформації. Для виробничого використання створіть пароль програми спеціально для Nodemailer та уникайте використання свого основного пароля Gmail. Спеціальні служби надсилання електронної пошти пропонують кращу надійність доставки та безпеку порівняно з використанням Gmail безпосередньо.</p> <h3>4. Запуск прикладу</h3> <p>Переконайтеся, що у вас встановлено необхідні залежності:</p> ```bash npm install nodemailer ``` <p>або</p> ```bash yarn add nodemailer ``` <p>Потім запустіть свій сервер розробки Next.js:</p> ```bash npm run dev ``` <p>або</p> ```bash yarn dev ``` <p>Відкрийте свій браузер і перейдіть на сторінку, що містить компонент <code>ContactForm</code>. Заповніть форму та надішліть її. Ви повинні побачити повідомлення про успіх або повідомлення про помилку, відображене під формою. Перевірте свою поштову скриньку, щоб переконатися, що електронний лист надіслано успішно.</p> <h2>Розширене використання та міркування</h2> <h3>1. Обробка станів завантаження</h3> <p>Щоб забезпечити кращий досвід користувача, важливо вказати, коли форма надсилається. Хоча <code>experimental_useFormState</code> безпосередньо не надає стан завантаження, ви можете керувати цим вручну, використовуючи хук <code>useTransition</code> React у поєднанні з <code>formAction</code>.</p> ```javascript 'use client'; import { experimental_useFormState as useFormState, useTransition } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); const [isPending, startTransition] = useTransition(); const handleSubmit = async (formData) => { startTransition(() => { formAction(formData); }); }; return ( <form action={handleSubmit}> <div> <label htmlFor="name">Ім'я:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">Електронна пошта:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">Повідомлення:</label> <textarea id="message" name="message" rows="4" required /> </div> <button type="submit" disabled={isPending}> {isPending ? 'Надсилання...' : 'Надіслати'} </button> {state && <p>{state}</p>} </form> ); } export default ContactForm; ``` <p>У цьому прикладі:</p> <ul> <li>Ми імпортуємо <code>useTransition</code> з 'react'.</li> <li>Ми викликаємо <code>useTransition</code>, щоб отримати стан <code>isPending</code> і функцію <code>startTransition</code>.</li> <li>Ми обертаємо виклик <code>formAction</code> всередині <code>startTransition</code>. Це говорить React обробляти подання форми як перехід, дозволяючи його перервати, якщо необхідно.</li> <li>Ми вимикаємо кнопку надсилання, поки <code>isPending</code> має значення true, і змінюємо текст кнопки на «Надсилання...».</li> </ul> <h3>2. Обробка помилок і перевірка</h3> <p>Надійна обробка помилок має вирішальне значення для забезпечення належного досвіду користувача. Серверна дія повинна виконувати ретельну перевірку та повертати інформативні повідомлення про помилки клієнту. Потім клієнтський компонент може відображати ці повідомлення користувачеві.</p> <p><b>Перевірка на стороні сервера:</b> Завжди перевіряйте дані на сервері, щоб запобігти зловмисному введенню та забезпечити цілісність даних. Використовуйте такі бібліотеки, як Zod або Yup для перевірки схеми.</p> <p><b>Перевірка на стороні клієнта (необов’язково):</b> Хоча перевірка на стороні сервера є важливою, перевірка на стороні клієнта може надати негайний відгук користувачеві та покращити досвід користувача. Однак ніколи не слід покладатися на перевірку на стороні клієнта як на єдине джерело істини.</p> <h3>3. Оптимістичні оновлення</h3> <p>Оптимістичні оновлення можуть зробити ваш додаток більш чутливим, негайно оновлюючи інтерфейс користувача, ніби подання форми було успішним, навіть до того, як сервер підтвердить це. Однак будьте готові обробляти помилки та повертати зміни, якщо надсилання не вдасться.</p> <p>За допомогою <code>experimental_useFormState</code> ви можете реалізувати оптимістичні оновлення, оновивши локальний стан на основі даних форми, перш ніж викликати <code>formAction</code>. Якщо серверна дія не вдається, ви можете повернути зміни на основі повідомлення про помилку, повернутого хуком.</p> <h3>4. Повторна перевірка та кешування</h3> <p>Серверні компоненти та дії React використовують кешування для покращення продуктивності. Коли подання форми змінює дані, важливо повторно перевірити кеш, щоб переконатися, що інтерфейс користувача відображає останні зміни.</p> <p>Функції <code>revalidatePath</code> і <code>revalidateTag</code> з <code>next/cache</code> можна використовувати для знецінення певних частин кешу. У прикладі <code>submitContactForm</code> <code>revalidatePath('/')</code> використовується для повторної перевірки головної сторінки після успішного надсилання форми.</p> <h3>5. Інтернаціоналізація (i18n)</h3> <p>Під час створення програм для глобальної аудиторії вирішальне значення має інтернаціоналізація (i18n). Це передбачає адаптацію вашої програми до різних мов, регіонів і культурних уподобань.</p> <p>Для форм це означає надання локалізованих міток, повідомлень про помилки та правил перевірки. Використовуйте бібліотеки i18n, такі як <code>next-intl</code> або <code>react-i18next</code>, для керування перекладами та форматування даних відповідно до локалі користувача.</p> <p>Приклад використання <code>next-intl</code>:</p> ```javascript // i18n.js (приклад) import { createTranslator } from 'next-intl'; const messages = { en: { ContactForm: { NameLabel: 'Name', EmailLabel: 'Email', MessageLabel: 'Message', SubmitButton: 'Submit', SuccessMessage: 'Thank you for your message!', ErrorMessage: 'An error occurred. Please try again later.', NameRequired: 'Name is required', EmailRequired: 'Email is required', MessageRequired: 'Message is required', }, }, es: { ContactForm: { NameLabel: 'Nombre', EmailLabel: 'Correo electrónico', MessageLabel: 'Mensaje', SubmitButton: 'Enviar', SuccessMessage: '¡Gracias por tu mensaje!', ErrorMessage: 'Ocurrió un error. Inténtalo de nuevo más tarde.', NameRequired: 'El nombre es obligatorio', EmailRequired: 'El correo electrónico es obligatorio', MessageRequired: 'El mensaje es obligatorio', }, }, // Додайте більше мов за потреби }; export async function getTranslations(locale) { return createTranslator({ locale, messages }); } ``` ```javascript // ContactForm.js 'use client'; import { experimental_useFormState as useFormState, useTransition } from 'react'; import { submitContactForm } from './actions'; import { useLocale, useTranslations } from 'next-intl'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); const [isPending, startTransition] = useTransition(); const t = useTranslations('ContactForm'); const handleSubmit = async (formData) => { startTransition(() => { formAction(formData); }); }; return ( <form action={handleSubmit}> <div> <label htmlFor="name">{t('NameLabel')}:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">{t('EmailLabel')}:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">{t('MessageLabel')}:</label> <textarea id="message" name="message" rows="4" required /> </div> <button type="submit" disabled={isPending}> {isPending ? 'Надсилання...' : t('SubmitButton')} </button> {state && <p>{state === 'Thank you for your message!' ? t('SuccessMessage') : t('ErrorMessage')}</p>} </form> ); } export default ContactForm; ``` <h3>6. Доступність (a11y)</h3> <p>Доступність має вирішальне значення для забезпечення можливості використання вашої програми всіма, включно з людьми з обмеженими можливостями. Враховуйте наступні вказівки щодо доступності під час створення форм:</p> <ul> <li><b>Використовуйте семантичний HTML:</b> Використовуйте відповідні елементи HTML, як-от <code><label></code>, <code><input></code> і <code><textarea></code>, щоб забезпечити структуру та значення для вашої форми.</li> <li><b>Надайте мітки для всіх полів форми:</b> Зв’яжіть мітки з полями форми за допомогою атрибута <code>for</code> в елементі <code><label></code> і атрибута <code>id</code> в полі форми.</li> <li><b>Використовуйте атрибути ARIA:</b> Використовуйте атрибути ARIA, щоб надати додаткову інформацію про структуру та поведінку форми допоміжним технологіям.</li> <li><b>Забезпечте достатній колірний контраст:</b> Використовуйте достатній колірний контраст між текстом і кольорами фону, щоб забезпечити читабельність для людей із вадами зору.</li> <li><b>Забезпечте навігацію за допомогою клавіатури:</b> Переконайтеся, що користувачі можуть переміщатися по формі лише за допомогою клавіатури.</li> <li><b>Перевіряйте за допомогою допоміжних технологій:</b> Перевіряйте свою форму за допомогою допоміжних технологій, як-от зчитувачі екрана, щоб переконатися, що вона доступна для людей з обмеженими можливостями.</li> </ul> <h2>Глобальні міркування та найкращі практики</h2> <h3>1. Часові пояси</h3> <p>Маючи справу з датами й часом у формах, важливо враховувати часові пояси. Зберігайте дати й час у форматі UTC на сервері та конвертуйте їх у місцевий часовий пояс користувача на клієнті.</p> <h3>2. Валюти</h3> <p>Маючи справу з грошовими значеннями у формах, важливо правильно обробляти валюти. Використовуйте бібліотеку форматування валют, щоб форматувати значення відповідно до локалі користувача та відображати відповідний символ валюти.</p> <h3>3. Адреси</h3> <p>Формати адрес значно відрізняються в різних країнах. Використовуйте бібліотеку, яка підтримує міжнародні формати адрес, щоб переконатися, що користувачі можуть правильно вводити свої адреси.</p> <h3>4. Номери телефонів</h3> <p>Формати номерів телефонів також відрізняються в різних країнах. Використовуйте бібліотеку форматування номерів телефонів, щоб форматувати номери телефонів відповідно до локалі користувача та перевіряти, чи є вони дійсними номерами телефонів.</p> <h3>5. Конфіденційність даних і відповідність</h3> <p>Пам’ятайте про правила конфіденційності даних, такі як GDPR і CCPA, під час збору та обробки даних форм. Отримайте згоду користувачів, перш ніж збирати їхні дані, і надайте їм можливість отримувати доступ, змінювати та видаляти їхні дані.</p> <h2>Висновок</h2> <p>Хук <code>experimental_useFormState</code> пропонує перспективний підхід до спрощення управління формами в програмах React. Використовуючи серверні дії та приймаючи декларативний стиль, розробники можуть створювати більш ефективні, зручні для підтримки та зручні форми. Все ще перебуваючи на експериментальній стадії, <code>experimental_useFormState</code> має значний потенціал для впорядкування робочих процесів форми та покращення загального досвіду розробки React. Дотримуючись найкращих практик, описаних у цьому посібнику, ви можете ефективно використати потужність <code>experimental_useFormState</code> для створення надійних і масштабованих рішень для форм для своїх програм.</p> <p>Не забувайте завжди бути в курсі останньої документації React і обговорень спільноти, оскільки API переходить від експериментального до стабільного.</p></div><template id="P:4"></template></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><div hidden id="S:4"><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormState</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">обробка форм</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">стан форми</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">експериментальний API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React форми</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">серверні дії</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Hook</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">оптимізація форм</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">асинхронні форми</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">мутації даних</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">оновлення UI</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>