React experimental_useFormState: Vylepšená správa formulářů v moderních aplikacích

Správa formulářů je klíčovým aspektem budování interaktivních a uživatelsky přívětivých webových aplikací. React se svou komponentovou architekturou poskytuje několik způsobů, jak s formuláři pracovat. Zavedení Server Actions a následná vylepšení jako experimental_useFormState přinášejí revoluci v tom, jak vývojáři přistupují ke zpracování formulářů, zejména při interakci se serverovou logikou. Tento experimentální hook, který je součástí pokračujícího zkoumání serverových komponent a akcí v Reactu, nabízí zjednodušený a efektivnější přístup ke správě stavu formuláře a ošetřování chyb.

Co je experimental_useFormState?

experimental_useFormState je React hook navržený ke zjednodušení správy formulářů, zejména v situacích, kdy interagujete se serverovými akcemi. Poskytuje mechanismus pro předávání stavu formuláře mezi klientem a serverem, což umožňuje plynulejší uživatelský zážitek a lepší ošetřování chyb. Integruje se přímo s React Server Components a Server Actions, což umožňuje efektivní načítání a mutaci dat.

Než se ponoříme do podrobností, je důležité si uvědomit, že tento hook je v současné době experimentální. To znamená, že API se v budoucích verzích může změnit. Proto se doporučuje používat ho v produkčních prostředích s opatrností a sledovat nejnovější dokumentaci Reactu.

Proč používat experimental_useFormState?

Tradiční správa formulářů v Reactu často zahrnuje lokální správu stavu formuláře pomocí hooků jako useState nebo knihoven jako Formik či React Hook Form. I když jsou tyto přístupy účinné pro validaci na straně klienta a jednoduché interakce s formulářem, mohou se stát těžkopádnými při práci se serverovými operacemi, jako je odesílání dat a ošetřování chyb. Zde je několik výhod, které experimental_useFormState nabízí:

• Zjednodušená integrace se serverovými akcemi: Hook výrazně usnadňuje propojení vašich formulářů se serverovými akcemi. Zpracovává složitosti spojené s předáváním dat na server, správou stavu načítání a zobrazováním chyb ze strany serveru.
• Vylepšený uživatelský zážitek: Předáváním stavu formuláře mezi klientem a serverem umožňuje experimental_useFormState reaktivnější a interaktivnější uživatelský zážitek. Můžete například poskytnout okamžitou zpětnou vazbu uživateli, zatímco se formulář zpracovává na serveru.
• Centralizované ošetřování chyb: Hook poskytuje centralizovaný mechanismus pro ošetřování chyb validace formuláře, a to jak na straně klienta, tak na serveru. To zjednodušuje zobrazování chyb a zajišťuje konzistentní uživatelský zážitek.
• Progresivní vylepšení: Použití Server Actions ve spojení s experimental_useFormState podporuje progresivní vylepšení. Formulář může fungovat i v případě, že je JavaScript vypnutý, a poskytuje tak základní funkčnost pro všechny uživatele.
• Méně „boilerplate“ kódu: Ve srovnání s tradičními technikami správy formulářů snižuje experimental_useFormState množství potřebného opakujícího se kódu, díky čemuž jsou vaše komponenty čistší a lépe udržovatelné.

Jak používat experimental_useFormState

Abyste mohli používat experimental_useFormState, musíte se nejprve ujistit, že používáte verzi Reactu, která podporuje Server Actions (React 18 nebo novější). Budete také muset povolit experimentální funkce ve vaší konfiguraci Reactu. To obvykle zahrnuje konfiguraci vašeho bundleru (např. Webpack, Parcel) pro povolení experimentálních funkcí.

Zde je základní příklad, jak používat experimental_useFormState:

Příklad: Jednoduchý kontaktní formulář

Vytvořme jednoduchý kontaktní formulář s poli pro jméno, e-mail a zprávu. K odeslání formuláře a zobrazení případných chyb použijeme experimental_useFormState.

1. Definujte serverovou akci:

Nejprve musíme definovat serverovou akci, která bude zpracovávat odeslání formuláře. Tato akce obdrží data z formuláře a provede jakoukoli nezbytnou validaci a zpracování na straně serveru (např. odeslání e-mailu).

// server-actions.js 'use server'; import { experimental_useFormState as useFormState } from 'react'; async function submitForm(prevState, formData) { // Simulace validace na straně serveru const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name) { return { error: 'Jméno je povinné' }; } if (!email) { return { error: 'E-mail je povinný' }; } if (!message) { return { error: 'Zpráva je povinná' }; } // Simulace odeslání e-mailu try { await new Promise(resolve => setTimeout(resolve, 1000)); // Simulace síťové latence console.log('Formulář úspěšně odeslán!'); return { success: true, message: 'Děkujeme za vaši zprávu!' }; } catch (error) { console.error('Chyba při odesílání e-mailu:', error); return { error: 'Odeslání zprávy se nezdařilo. Zkuste to prosím znovu.' }; } } export default submitForm;

2. Vytvořte React komponentu:

Nyní vytvořme React komponentu, která bude vykreslovat formulář a používat experimental_useFormState ke správě stavu formuláře.

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

Jméno:

E-mail:

Zpráva:

Odeslat {state?.error &&

{state.error}

} {state?.success &&

{state.message}

}

); } export default ContactForm;

Vysvětlení:

• 'use client';: Tato direktiva říká Reactu, že se jedná o klientskou komponentu. Je to nezbytné, protože experimental_useFormState lze použít v rámci klientských komponent k interakci se serverovými akcemi.
• useFormState(submitForm, null): Tento hook přijímá dva argumenty: serverovou akci, která má být provedena (submitForm), a počáteční stav (v tomto případě null). Vrací pole obsahující aktuální stav formuláře a funkci pro spuštění serverové akce. Vrácená funkce `formAction` musí být předána do `action` prop formuláře.
• form action={formAction}: Tímto se serverová akce naváže na odeslání formuláře. Když je formulář odeslán, na serveru se provede akce submitForm.
• state?.error: Zobrazí chybové zprávy vrácené ze serverové akce.
• state?.success: Zobrazí zprávy o úspěchu vrácené ze serverové akce.
• state?.pending: Toto je automaticky nastaveno na true během provádění serverové akce, což vám umožní deaktivovat tlačítko pro odeslání.

Podrobné vysvětlení kódu

Pojďme si kód rozebrat, abychom pochopili, jak funguje krok za krokem.

Serverová akce (server-actions.js)

• 'use server';: Tato direktiva označuje soubor jako obsahující serverové akce. Je klíčové, aby React pochopil, že funkce v tomto souboru by se měly provádět na serveru.
• async function submitForm(prevState, formData): Definuje funkci serverové akce. Přijímá dva argumenty: prevState (předchozí stav formuláře) a formData (instanci FormData obsahující data z formuláře).
• formData.get('name'), formData.get('email'), formData.get('message'): Tyto řádky extrahují data z formuláře z objektu FormData. Argumentem pro get() je atribut name odpovídajícího vstupního pole ve formuláři.
• Validace na straně serveru: Kód provádí základní validaci na straně serveru, aby se zajistilo, že jsou přítomna všechna povinná pole. Pokud některé pole chybí, vrátí klientovi objekt s chybou.
• Simulace odeslání e-mailu: Kód simuluje odeslání e-mailu pomocí await new Promise(resolve => setTimeout(resolve, 1000)). Tím se zavádí 1sekundové zpoždění pro simulaci síťové latence. V reálné aplikaci byste toto nahradili skutečnou logikou pro odesílání e-mailů (např. pomocí Nodemailer nebo SendGrid).
• Ošetření chyb: Kód obsahuje blok try...catch pro zpracování jakýchkoli chyb, které se vyskytnou během procesu odesílání e-mailu. Pokud dojde k chybě, zapíše ji do konzole a vrátí klientovi objekt s chybou.
• Vracení stavu: Serverová akce vrací objekt obsahující buď chybovou zprávu, nebo zprávu o úspěchu. Tento objekt se stává novým stavem, který je předán klientské komponentě prostřednictvím hooku useFormState.

Klientská komponenta (ContactForm.jsx)

• 'use client';: Tato direktiva označuje, že tato komponenta je klientská a může používat klientské hooky jako useState a useEffect. Je vyžadována pro použití hooků a interakci s DOM.
• const [state, formAction] = useFormState(submitForm, null);: Tento řádek volá hook experimental_useFormState. Jako první argument předává serverovou akci submitForm a jako druhý argument počáteční stav (null). Hook vrací pole obsahující aktuální stav formuláře (state) a funkci pro spuštění serverové akce (formAction).
• <form action={formAction}>: Tím se nastaví atribut action formuláře na funkci formAction. Když je formulář odeslán, bude tato funkce zavolána, což spustí serverovou akci submitForm.
• <input type="text" id="name" name="name" />, <input type="email" id="email" name="email" />, <textarea id="message" name="message"></textarea>: Toto jsou vstupní pole formuláře. Atributy name těchto polí jsou důležité, protože určují, jak se k datům přistupuje v serverové akci pomocí formData.get('name'), formData.get('email') a formData.get('message').
• <button type="submit" disabled={state?.pending}>Submit</button>: Toto je tlačítko pro odeslání formuláře. Atribut disabled={state?.pending} deaktivuje tlačítko, zatímco se formulář odesílá na server, což zabraňuje uživateli odeslat formulář vícekrát.
• {state?.error && <p style={{ color: 'red' }}>{state.error}</p>}: Tím se podmíněně vykreslí chybová zpráva, pokud ve stavu formuláře existuje chyba. Chybová zpráva se zobrazí červeně.
• {state?.success && <p style={{ color: 'green' }}>{state.message}</p>}: Tím se podmíněně vykreslí zpráva o úspěchu, pokud byl formulář úspěšně odeslán. Zpráva o úspěchu se zobrazí zeleně.

Pokročilé použití a úvahy

Ačkoli výše uvedený příklad ukazuje základní použití experimental_useFormState, existuje několik dalších aspektů, které je třeba zvážit při jeho použití ve složitějších aplikacích.

Optimistické aktualizace

Můžete implementovat optimistické aktualizace, abyste poskytli reaktivnější uživatelský zážitek. Optimistické aktualizace zahrnují okamžitou aktualizaci UI po odeslání formuláře uživatelem za předpokladu, že serverová akce bude úspěšná. Pokud serverová akce selže, můžete aktualizaci vrátit zpět a zobrazit chybovou zprávu.

// Příklad optimistických aktualizací async function submitForm(prevState, formData) { // Optimisticky aktualizovat UI // (To by obvykle zahrnovalo aktualizaci stavu seznamu nebo tabulky) const id = Date.now(); // Dočasné ID return { optimisticUpdate: { id: id, name: formData.get('name'), email: formData.get('email'), } } } // Ve vaší klientské komponentě: const [state, formAction] = useFormState(submitForm, null); // Stav, kde vykreslujete optimistickou aktualizaci const [items, setItems] = useState([]); useEffect(()=>{ if (state && state.optimisticUpdate) { setItems(prev => [...prev, state.optimisticUpdate]); } }, [state])

V tomto zjednodušeném příkladu vrací serverová akce vlastnost optimisticUpdate. V klientské komponentě ji poté extrahujeme a použijeme k přidání do pole vykresleného v naší aplikaci. To může například představovat přidání nového komentáře do seznamu komentářů na blogovém příspěvku.

Ošetření chyb

Efektivní ošetření chyb je klíčové pro dobrý uživatelský zážitek. experimental_useFormState usnadňuje ošetření chyb, které se vyskytnou během odesílání formuláře. Můžete uživateli zobrazit chybové zprávy a poskytnout návod, jak chyby opravit.

Zde jsou některé osvědčené postupy pro ošetření chyb:

• Poskytujte jasné a konkrétní chybové zprávy: Chybové zprávy by měly být jasné, stručné a specifické pro chybu, která nastala. Vyhněte se obecným chybovým zprávám jako „Došlo k chybě.“
• Zobrazujte chybové zprávy v blízkosti relevantních vstupních polí: Zobrazujte chybové zprávy poblíž vstupních polí, která chyby způsobila. To uživateli usnadní pochopení, která pole je třeba opravit.
• Používejte vizuální vodítka ke zvýraznění chyb: Používejte vizuální vodítka, jako je červený text nebo ohraničení, ke zvýraznění vstupních polí s chybami.
• Poskytujte návrhy na opravu chyb: Pokud je to možné, poskytněte návrhy na opravu chyb. Například pokud uživatel zadá neplatnou e-mailovou adresu, navrhněte správný formát.

Aspekty přístupnosti

Při tvorbě formulářů je důležité myslet na přístupnost, aby vaše formuláře mohly používat i lidé s postižením. Zde je několik aspektů přístupnosti, které je třeba mít na paměti:

• Používejte sémantické HTML: K strukturování formulářů používejte sémantické HTML prvky jako <label>, <input> a <textarea>. To usnadňuje asistivním technologiím pochopení struktury formuláře.
• Poskytujte popisky pro všechna vstupní pole: Používejte prvek <label> k poskytnutí popisků pro všechna vstupní pole. Atribut for prvku <label> by se měl shodovat s atributem id odpovídajícího vstupního pole.
• Používejte ARIA atributy: Používejte ARIA atributy k poskytnutí dodatečných informací o prvcích formuláře asistivním technologiím. Můžete například použít atribut aria-required k označení, že vstupní pole je povinné.
• Zajistěte dostatečný kontrast: Ujistěte se, že je mezi textem a barvou pozadí dostatečný kontrast. To usnadňuje lidem se slabým zrakem čtení formuláře.
• Testujte s asistivními technologiemi: Testujte své formuláře s asistivními technologiemi, jako jsou čtečky obrazovky, abyste se ujistili, že jsou použitelné pro lidi s postižením.

Internacionalizace (i18n) a lokalizace (l10n)

Při tvorbě aplikací pro globální publikum jsou internacionalizace (i18n) a lokalizace (l10n) klíčové. To zahrnuje přizpůsobení vaší aplikace různým jazykům, kulturám a regionům.

Zde jsou některé aspekty pro i18n a l10n při používání experimental_useFormState:

• Lokalizujte chybové zprávy: Lokalizujte chybové zprávy, které se zobrazují uživateli. Tím zajistíte, že se chybové zprávy zobrazí v preferovaném jazyce uživatele.
• Podporujte různé formáty data a čísel: Podporujte různé formáty data a čísel na základě lokality uživatele.
• Zpracujte jazyky psané zprava doleva: Pokud vaše aplikace podporuje jazyky psané zprava doleva (např. arabština, hebrejština), ujistěte se, že je rozložení formuláře v těchto jazycích správně zobrazeno.
• Používejte knihovnu pro překlady: K správě překladů používejte knihovnu pro překlady, jako je i18next nebo react-intl.

Můžete například použít slovník k uložení chybových zpráv a poté je vyhledat na základě lokality uživatele.

// Příklad s použitím i18next import i18next from 'i18next'; i18next.init({ resources: { en: { translation: { "name_required": "Name is required", "email_required": "Email is required", } }, cs: { translation: { "name_required": "Jméno je povinné", "email_required": "E-mail je povinný", } } }, lng: 'cs', fallbackLng: 'en', interpolation: { escapeValue: false // react already safes from xss } }); // Ve vaší serverové akci: if (!name) { return { error: i18next.t("name_required") }; }

Tento příklad používá i18next ke správě překladů. Funkce i18next.t() se používá k vyhledání přeložené chybové zprávy na základě lokality uživatele.

Globální aspekty a osvědčené postupy

Při vývoji webových aplikací pro globální publikum je třeba vzít v úvahu několik klíčových aspektů, aby byl zajištěn plynulý a inkluzivní uživatelský zážitek. Tyto aspekty zahrnují různé oblasti, včetně přístupnosti, kulturní citlivosti a optimalizace výkonu.

Časová pásma

Při práci s daty a časy je klíčové správně zacházet s časovými pásmy. Uživatelé se mohou nacházet v různých časových pásmech, takže je třeba zajistit, aby se data a časy zobrazovaly v místním časovém pásmu uživatele.

Zde jsou některé osvědčené postupy pro práci s časovými pásmy:

• Ukládejte data a časy v UTC: Ukládejte data a časy v UTC (Koordinovaný světový čas) ve vaší databázi. Tím zajistíte, že data a časy budou konzistentní napříč všemi časovými pásmy.
• Používejte knihovnu pro časová pásma: K převodu dat a časů do místního časového pásma uživatele používejte knihovnu pro časová pásma, jako je Moment.js nebo Luxon.
• Umožněte uživatelům zadat své časové pásmo: Umožněte uživatelům zadat své časové pásmo v nastavení profilu. To vám umožní zobrazovat data a časy v jejich preferovaném časovém pásmu.

Měny

Pokud vaše aplikace zpracovává finanční transakce, musíte podporovat různé měny. Uživatelé se mohou nacházet v různých zemích s různými měnami.

Zde jsou některé osvědčené postupy pro práci s měnami:

• Ukládejte ceny v konzistentní měně: Ukládejte ceny v konzistentní měně (např. USD) ve vaší databázi.
• Používejte knihovnu pro převod měn: K převodu cen do místní měny uživatele používejte knihovnu pro převod měn.
• Zobrazujte ceny se správným symbolem měny: Zobrazujte ceny se správným symbolem měny na základě lokality uživatele.
• Poskytněte uživatelům možnost volby měny: Umožněte uživatelům zvolit si preferovanou měnu.

Kulturní citlivost

Při vývoji webových aplikací pro globální publikum je důležité být kulturně citlivý. To znamená být si vědom různých kulturních norem a hodnot a vyhýbat se jakémukoli obsahu, který by mohl být urážlivý nebo necitlivý.

Zde je několik tipů pro kulturní citlivost:

• Vyhněte se používání idiomů nebo slangu: Vyhněte se používání idiomů nebo slangu, které nemusí být srozumitelné lidem z jiných kultur.
• Buďte opatrní s obrázky a symboly: Buďte opatrní s obrázky a symboly, které používáte ve své aplikaci. Některé obrázky a symboly mohou mít v různých kulturách různý význam.
• Respektujte různá náboženská přesvědčení: Respektujte různá náboženská přesvědčení a vyhýbejte se jakémukoli obsahu, který by mohl být považován za urážlivý pro náboženské skupiny.
• Buďte si vědomi různých kulturních norem: Buďte si vědomi různých kulturních norem a hodnot. Například v některých kulturách je považováno za nezdvořilé navazovat přímý oční kontakt.

Optimalizace výkonu pro globální publikum

Uživatelé po celém světě mají různé rychlosti internetového připojení a schopnosti zařízení. Optimalizace výkonu vaší aplikace je klíčová pro zajištění plynulého a responzivního zážitku pro všechny uživatele, bez ohledu na jejich polohu nebo zařízení.

• Sítě pro doručování obsahu (CDN): Používejte CDN k distribuci assetů vaší aplikace (např. obrázků, JavaScriptu, CSS) na servery po celém světě. To snižuje latenci pro uživatele, kteří se nacházejí daleko od vašeho původního serveru.
• Optimalizace obrázků: Optimalizujte obrázky jejich kompresí a používáním vhodných formátů souborů (např. WebP). To snižuje velikost souborů obrázků a zlepšuje dobu načítání stránky.
• Rozdělení kódu (Code Splitting): Používejte rozdělení kódu k rozdělení vaší aplikace na menší části, které lze načítat na vyžádání. To snižuje počáteční dobu načítání aplikace.
• Mezipaměť (Caching): Používejte mezipaměť k ukládání často přistupovaných dat v prohlížeči nebo na serveru. To snižuje počet požadavků, které aplikace musí na server odeslat.
• Minifikace a sdružování (Bundling): Minifikujte a sdružujte své soubory JavaScript a CSS, abyste zmenšili jejich velikost.

Alternativy k experimental_useFormState

Ačkoli experimental_useFormState nabízí přesvědčivý přístup ke správě formulářů se Server Actions, je důležité si být vědom alternativních řešení, zejména s ohledem na to, že je stále v experimentální fázi. Zde je několik populárních alternativ:

• React Hook Form: React Hook Form je výkonná a flexibilní knihovna pro formuláře, která používá nekontrolované komponenty. Je známá pro minimální počet re-renderů a vynikající výkon. Dobře se integruje s validačními knihovnami jako Yup a Zod.
• Formik: Formik je populární knihovna pro formuláře, která zjednodušuje správu stavu formuláře, validaci a odesílání. Poskytuje API na vyšší úrovni než React Hook Form a je dobrou volbou pro složité formuláře.
• Redux Form: Redux Form je knihovna pro formuláře, která se integruje s Reduxem. Je dobrou volbou pro aplikace, které již používají Redux pro správu stavu.
• Použití useState a useRef: Pro jednoduché formuláře můžete také spravovat stav formuláře přímo pomocí React hooku useState a přistupovat k hodnotám formuláře pomocí useRef. Tento přístup vyžaduje více manuální práce, ale může být vhodný pro základní formuláře, kde chcete mít detailní kontrolu.

Závěr

experimental_useFormState představuje významný krok vpřed ve správě formulářů v Reactu, zejména v kombinaci se Server Actions. Nabízí zjednodušený a efektivnější způsob, jak spravovat stav formuláře, interagovat se serverovou logikou a zlepšit uživatelský zážitek. Ačkoli je stále v experimentální fázi, stojí za to ho prozkoumat pro nové projekty a zvážit pro stávající projekty, jakmile bude zralejší. Nezapomeňte sledovat nejnovější dokumentaci Reactu a osvědčené postupy, abyste se ujistili, že hook používáte efektivně a zodpovědně.

Pochopením principů uvedených v tomto průvodci a jejich přizpůsobením vašim specifickým potřebám můžete vytvářet robustní, přístupné a globálně orientované webové aplikace, které poskytují vynikající uživatelský zážitek uživatelům po celém světě. Přijetí těchto osvědčených postupů nejen zvyšuje použitelnost vašich aplikací, ale také demonstruje závazek k inkluzivitě a kulturní citlivosti, což v konečném důsledku přispívá k úspěchu a dosahu vašich projektů v globálním měřítku.

Jak se React neustále vyvíjí, nástroje jako experimental_useFormState budou hrát stále důležitější roli při budování moderních, serverově renderovaných React aplikací. Pochopení a využití těchto nástrojů bude klíčové pro udržení náskoku a poskytování výjimečných uživatelských zážitků.