React 19 Server Actions з Zod: меншы код для формадату

React 19, Server Actions і useActionState змінююя спосаб будавання форм. Для багацькоў экранаў можна застаўся з стандартнымі HTML-формамі і прыемнікамі на сервере, замест таго каб для кожнага случая выкарыстоўваць велікую бібліятэку кліентскіх форм.

Пасля калькі міграцый на гэты стак, тыя ж два рядкі продовжвалі з’яўляцца практычна ў кожнай дзеянні:

const data = Object.fromEntries(formData);

const result = schema.safeParse(data);if (!result.success) {
  return {
    errors: result.error.flatten().fieldErrors,
  };
}

Экраны выхаду ў систему, процесы рэгістрацыі, сторанкі кантактаў і рэдагувальнікі прафіляў усе мелі аднойчыны код: ператвараць FormData у об’ект, запускаць Zod, формаваць памылкі ў полях, а потым продовжваць. Самэ гэта повтарэнне і є метай zod-form-action — маленькага дапаможніка для спаўнення Zod з React 19 Server Actions.

Што змянілася ў React 19?

useActionState дапамагае лёгкая адстэйбаванню статусу адправкі без неабяжлівага керавання калькамі статусу кліента рукамі.

У працоўніку не патрэбна ўстановка элемента onSubmit, флагоў загрузкі і механізмаў верыфікацыі ў браузеры для кожнага формы — форма можа адразу адправіць данні на сервер.

Такой падход зазвычай дае:

• Менш JavaScript-кода, які адправляецца на кліента
• Лепшую якасць працы для простых сцэнарыяў
• Простейшы код адправкі данні
• Магчымасць поступовага падтрымкі, калі пакет даных кліента медленны або вярнуўся без даных
• Яснае раздзеленне задачі інтэрфейсу і сервера

Для багато застосоўваń гэты натыўны падход є ідальным.

Проблема з верыфікацыяй форм

Серверныя адправкі данні прымоць экзанпляр FormData.

Перад тым, як Zod зможа выкарыстоўваць механізмы верыфікацыі, большасць працоўнікаў ператварае гэты экзанпляр у звычны об’ект.

const data = Object.fromEntries(formData);

const result = schema.safeParse(data);

Сам падчынны спосаб працы ўсё гаразд.

Проблема заключаецца у тым, што кожны обробнік выкарыстоўвае аднойчы той самы список пераконтрацоў:

• Ператворыць FormData у звычны об’ект
• Адрыхтуваць схему Zod
• Форматаваць паведамленні пра адмыткі на рэвэлі
• Пры успеху вернуць значэнні з правильным типам
• Продаваць да коду домэна

Калі такі список пераконтрацоў выкарыстоўваецца на дзесятках форм, бярознае выкананне задач заменяе сабою рэальную логіку.

Представляем zod-form-action

zod-form-action створаны, каб скасаваць гэты повтаральны слой.

У замяну на пераўтворэнне і перакантрацыю ў кожным серверскім абробніку, обробнік можа сфокусавацца на поведзенні домэна.

Пакет выкарыстоўвае вялікі набор ужо наладзеных компанентаў:

• React 19
• useActionState
• Next.js Server Actions (або іншы хост Server Actions)
• Zod
• TypeScript

Мета простая: падрыжваць адзінаковасць пераверкі формы на станцыі сервера і зрабіць яе простай для павторнага выкарыстоўвання.

Доступна жывая сандбокс-сераўерная среда, як у гэтым дэмонстрацыйным прыкладзе CodeSandbox.

Чаму не проста выкарыстоўваць React Hook Form?

Гэты вопыт часта задаюць, і адказ на яго не ўзгорнуты.

React Hook Form застаецца выдатной бібліятэкай.

Ён яшчэ застаецца хорашым выбарам для:

• Дынамічных форм
• Пераверкі на станцыі кліента
• Складных інтэрактыўных процесаў
• Масэвых массивоў поль
• Багатапакетных візардоў

Не кожная форма патрабуе такога розмаху функцыяналу.

Калі проект вже выкарыстоўвае вбудованы падход да форм у React 19 з Server Actions, просты помачнік Zod на сервере можа быць кращым рашэнням, чым цэлы двігун форм на станцыі кліента.

Гэтыя два інструмента рашаюць разныя проблемы, а не конкуруюць безпосередні.

Корыстнае ад змены на zod-form-action

Команды часта адмаўляюць яго для:

• Заканчыць павтарэнне ператворэння FormData
• Узгадаць прыначыны пераканалення па всіх дзеяннях
• Атрымаць болей чыстыя типы TypeScript пасля успешнага парсавання
• Адказваць пра памылкі полей у аднам стандартным формате
• Гармоніюваць з функцыямі React 19 Server Actions
• Дазволіць кожнаму дзеянню сфокусавацца на правілах даных

Практычныя прыклады выкарыстоўвання

Гэта чыста пасляўодбавляецца да ўседзённых экранаў:

• Увайшчыце
• Рэўістрацыя
• Кантакты
• Падпіска на наватык
• Рэдагаванне прафіля
• Наладкі аблікова
• Введэнне даных у панелі керування
• Формы CRUD для адміністрацыі

У такіх процесах зазвычай трэбуюцца простыя, павтаральныя пераканалення, а не высока дынамічныя схемы полей.

Чаму выделяць гэты шаблон

Практычна ідэнтычныя блакі пераканалення часта з’являліся ў кожнай мігрантскай базе коду.

Парадоксальна спроба копіювання ўсьго назаўсёды є нестабільной; пераклад запашчаткованых крокаў у пакет, які можна перыявляць, дапамагае падтрымваць проекты у суворай ахвоте та дазволяе іншым прадасты павыленьства для гэтага інструменту.

Публікацыя такога пакета прывабляе адгукі, звесткі пра бягы та дапамогу, замест таго каб шаблон застаўся толькі ў аднам прыватным репазітарыі.

Важна безпека типаў

Сілу Zod даўае пераканальванне пад час выконання у поўнай суворасці з типамі TypeScript.

Уместа таго, каб адносіцца да кожнага значэння FormData як да невядомага, прыемнік можа працаваць з дадзеннямі, якія вучыненыя ўжо пераканальванымі та з адзначанымі типамі.

Гэта зазвычай значыць:

• Кращая автадапліяцыя ў успешным сцэнарыі
• Менш неспадзянак пад час выконання
• Чыстэйшыя прыемнікі
• Прыёмнае дагляданне на далекія тыдзены

Працэсавая эфектыўнасць

Паколькі пераканальванне выконваецца на серверы, бандл кліента можа застацца меншым.

Для даплікаў, які вже выкарыстоваюць Server Actions, гэта адпавядае праганню React 19 перадважаць обробку дадзеных на сервер, калі гэта мае сэнс.

Што будзе далей?

Актуальная робота над zod-form-action спрямована на пасіблівасць для разработчыкаў.

Серед тэм, якія досліджуюцца:

• Болей сильныя можлівасці інферэнсу у TypeScript
• Дадатковыя інструменты для верыфікацыі
• Больш прыкладаў
• Шырэйшая інтеграцыя з фреймворкамі
• Болей чыткая дакументацыя

Адзінкі людзей, якія выкарыстоўваюць гэты пакет, будуць важлівым фактарам для прагнутых выклікаў.

Часта задаваемыя запитанні

Магчыма выкарыстоўваць React Hook Form з React 19?

Так. React Hook Form застаецца надзейным выборам, особліва калі формы патрабуюць высокага рэгулярнага взаімадзеяўства з боку кліента.

Чы React 19 заменяе React Hook Form?

Няма. React 19 дадзе новыя API і патэрны; ён не заменяе вядомыя бібліятэкі для форм. Выбірайце ў залежнасці ад складносі формы і таго, дзе трэба выканаць перакананне.

Чаму викорыстоўваць Zod для пераканання?

Zod выканае перакананне пад час роботы програмы і даглядае за тым, каб типы TypeScript былі сувязаны з гэтым перакананнем, таму некоректныя даны не будуць працаваць, а коректныя застануцца з правильнымі типамі.

Ci zod-form-action падходзіць толькі для Next.js?

Няма. Будзь-яя прыкладка на React 19, якая викорыстоўвае Server Actions і Zod, можа отрымаць корысту, залежна ад структуры архітектуры.

Заключныя меркі

React 19 спрыяе тым, каб команды стваралі простэйшыя формы.

Натыўныя HTML-формы, useActionState, Server Actions і Zod разам можуць забезпечыць надзею пераканання і правильныя типы, не трэбаць завжды викорыстоўваць большы набір інструментаў для форм на кліентскай стороне.

Калі той самы блок парсавання і адзначэння правільнасці FormData выкорыстоўваецца ў багацькох дзеяннях, выкарыстоўванне такога шаблона як відновліваемага памочнага класу спакойвае кодбазу.

zod-form-action быў створаны самэ пры гэтым цялі.

Інсталюйце яго з сторонней сторонкі пакета npm.