React useFormState: Zvládnutí zpracování formulářů pro optimalizovanou uživatelskou zkušenost

Formuláře jsou základní součástí webových aplikací, které uživatelům umožňují interakci s vaší aplikací a odesílání dat. Správa stavu formuláře, zpracování validace a poskytování zpětné vazby se však může stát složitou, zejména ve velkých a dynamických aplikacích. Hook useFormState od Reactu, představený v Reactu 18, nabízí výkonný a efektivní způsob správy stavu formuláře a zjednodušení logiky zpracování formulářů, což vede ke zlepšení výkonu a lepší uživatelské zkušenosti. Tento komplexní průvodce se podrobně zabývá hookem useFormState, pokrývá jeho základní koncepty, výhody, praktické příklady a pokročilé techniky.

Co je React useFormState?

useFormState je React hook, který zjednodušuje správu stavu formuláře tím, že zapouzdřuje stav a logiku aktualizace do jednoho hooku. Je speciálně navržen pro práci ve spojení s React Server Components a Server Actions, což umožňuje progresivní vylepšení a zlepšený výkon přesunutím zpracování formuláře na server.

Klíčové vlastnosti a výhody:

• Zjednodušená správa stavu: Centralizuje stav formuláře a logiku aktualizace, čímž snižuje množství opakujícího se kódu a zlepšuje čitelnost kódu.
• Integrace se serverovými akcemi: Bezproblémově se integruje s React Server Actions, což umožňuje zpracovávat odesílání a validaci formulářů na serveru.
• Progresivní vylepšení: Umožňuje progresivní vylepšení tím, že formuláře fungují i bez JavaScriptu, přičemž rozšířená funkčnost je poskytnuta, když je JavaScript povolen.
• Optimalizovaný výkon: Snižuje zpracování na straně klienta díky zpracování logiky formuláře na serveru, což vede k rychlejšímu odesílání formulářů a lepšímu výkonu aplikace.
• Přístupnost: Usnadňuje tvorbu přístupných formulářů poskytováním mechanismů pro zpracování chyb a poskytování zpětné vazby uživatelům se zdravotním postižením.

Porozumění hooku useFormState

Hook useFormState přijímá dva argumenty:

1. Serverová akce: Funkce, která bude spuštěna při odeslání formuláře. Tato funkce obvykle zpracovává validaci formuláře, zpracování dat a aktualizace databáze.
2. Počáteční stav: Počáteční hodnota stavu formuláře. Může to být jakákoli hodnota JavaScriptu, například objekt, pole nebo primitivní typ.

Hook vrací pole obsahující dvě hodnoty:

1. Stav formuláře: Aktuální hodnota stavu formuláře.
2. Akce formuláře: Funkce, kterou předáte do vlastnosti action elementu form. Tato funkce spouští serverovou akci při odeslání formuláře.

Základní příklad:

Podívejme se na jednoduchý příklad kontaktního formuláře, který uživatelům umožňuje odeslat své jméno a e-mailovou adresu.

// Serverová akce (příklad - musí být definována jinde)
async function submitContactForm(prevState, formData) {
  // Validace dat z formuláře
  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Prosím, vyplňte všechna pole.' };
  }

  // Zpracování dat formuláře (např. odeslání e-mailu)
  try {
    // Simulace odeslání e-mailu
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulace asynchronní operace
    return { message: 'Děkujeme za odeslání!' };
  } catch (error) {
    return { message: 'Vyskytla se chyba. Zkuste to prosím později.' };
  }
}

// React komponenta
'use client'; // Důležité pro serverové akce

import { useFormState } from 'react-dom';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, { message: null });

  return (
    

      Jméno:
      



      Email:
      



      Odeslat

      {state?.message && 
{state.message}
}
    
  );
}

export default ContactForm;

V tomto příkladu je funkce submitContactForm serverová akce. Přijímá předchozí stav a data formuláře jako argumenty. Validuje data formuláře a, pokud jsou platná, zpracuje data a vrátí nový objekt stavu s úspěšnou zprávou. Pokud dojde k chybám, vrátí nový objekt stavu s chybovou zprávou. Hook useFormState spravuje stav formuláře a poskytuje funkci formAction, která je předána do vlastnosti action elementu form. Když je formulář odeslán, funkce submitContactForm je spuštěna na serveru a výsledný stav je aktualizován v komponentě.

Pokročilé techniky s useFormState

1. Validace formuláře:

Validace formuláře je klíčová pro zajištění integrity dat a poskytnutí dobré uživatelské zkušenosti. useFormState lze použít pro zpracování logiky validace formuláře na serveru. Zde je příklad:

async function validateForm(prevState, formData) {
  const name = formData.get('name');
  const email = formData.get('email');

  let errors = {};

  if (!name) {
    errors.name = 'Jméno je povinné.';
  }

  if (!email) {
    errors.email = 'Email je povinný.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errors.email = 'Neplatný formát e-mailu.';
  }

  if (Object.keys(errors).length > 0) {
    return { errors: errors };
  }

  // Zpracování dat z formuláře (např. uložení do databáze)
  return { message: 'Formulář byl úspěšně odeslán!', errors: null };
}

function MyForm() {
  const [state, action] = useFormState(validateForm, { message: null, errors: null });

  return (
    

      Jméno:
      

      {state?.errors?.name && 
{state.errors.name}
}

      Email:
      

      {state?.errors?.email && 
{state.errors.email}
}

      Odeslat
      {state?.message && 
{state.message}
}
    
  );
}

V tomto příkladu serverová akce validateForm validuje data formuláře a vrací objekt obsahující jakékoli validační chyby. Komponenta poté zobrazí tyto chyby uživateli.

2. Optimistické aktualizace:

Optimistické aktualizace mohou zlepšit uživatelskou zkušenost tím, že poskytují okamžitou zpětnou vazbu, ještě předtím, než server zpracuje odeslání formuláře. S useFormState a trochou logiky na straně klienta můžete implementovat optimistické aktualizace aktualizováním stavu formuláře ihned po odeslání a následným vrácením změny, pokud server vrátí chybu.

'use client'

import { useFormState } from 'react-dom';
import { useState } from 'react';

async function submitForm(prevState, formData) {
  await new Promise(resolve => setTimeout(resolve, 1000)); // Simulace latence sítě

  const value = formData.get('value');
  if (value === 'error') {
    return { message: 'Odeslání selhalo!' };
  }
  return { message: 'Odeslání úspěšné!' };
}

function OptimisticForm() {
  const [optimisticValue, setOptimisticValue] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [state, action] = useFormState(submitForm, { message: '' });

  const handleSubmit = async (e) => {
    setIsSubmitting(true);
    setOptimisticValue(e.target.value.value);
    const formData = new FormData(e.target);
    const result = await action(prevState, formData);
    setIsSubmitting(false);

    if (result?.message === 'Odeslání selhalo!') {
      setOptimisticValue(''); // Vrátit zpět při chybě
    }
  };

  return (
    

      Hodnota:
      


      Odeslat
      {state?.message && 
{state.message}
}
    
  );
}

V tomto příkladu simulujeme opožděnou odpověď serveru. Před dokončením serverové akce je vstupní pole optimisticky aktualizováno odeslanou hodnotou. Pokud serverová akce selže (simulováno odesláním hodnoty 'error'), vstupní pole se vrátí do původního stavu.

3. Zpracování nahrávání souborů:

useFormState lze také použít pro zpracování nahrávání souborů. Objekt FormData automaticky zpracovává data souborů. Zde je příklad:

async function uploadFile(prevState, formData) {
  const file = formData.get('file');

  if (!file) {
    return { message: 'Prosím, vyberte soubor.' };
  }

  // Simulace nahrávání souboru
  await new Promise(resolve => setTimeout(resolve, 1000));

  // Zde byste typicky nahráli soubor na server
  console.log('Soubor nahrán:', file.name);

  return { message: `Soubor ${file.name} byl úspěšně nahrán!` };
}

function FileUploadForm() {
  const [state, action] = useFormState(uploadFile, { message: null });

  return (
    

      Vyberte soubor:
      



      Nahrát

      {state?.message && 
{state.message}
}
    
  );
}

V tomto příkladu serverová akce uploadFile získá soubor z objektu FormData a zpracuje ho. V reálné aplikaci byste typicky nahráli soubor do cloudového úložiště jako Amazon S3 nebo Google Cloud Storage.

4. Progresivní vylepšení:

Jednou z významných výhod useFormState a serverových akcí je schopnost poskytovat progresivní vylepšení. To znamená, že vaše formuláře mohou stále fungovat, i když je v prohlížeči uživatele zakázán JavaScript. Formulář se odešle přímo na server a serverová akce zpracuje odeslání. Když je JavaScript povolen, React vylepší formulář o interaktivitu a validaci na straně klienta.

Abyste zajistili progresivní vylepšení, měli byste se ujistit, že vaše serverové akce zpracovávají veškerou logiku validace a zpracování dat. Můžete také poskytnout záložní mechanismy pro uživatele bez JavaScriptu.

5. Zohlednění přístupnosti:

Při tvorbě formulářů je důležité zohlednit přístupnost, aby uživatelé se zdravotním postižením mohli vaše formuláře efektivně používat. useFormState vám může pomoci vytvářet přístupné formuláře poskytováním mechanismů pro zpracování chyb a poskytování zpětné vazby uživatelům. Zde jsou některé osvědčené postupy pro přístupnost:

• Používejte sémantické HTML: Používejte sémantické HTML elementy jako <label>, <input> a <button>, abyste svým formulářům dodali strukturu a význam.
• Poskytněte jasné popisky: Ujistěte se, že všechna pole formuláře mají jasné a popisné popisky, které jsou spojeny s odpovídajícími vstupními elementy pomocí atributu for.
• Zpracovávejte chyby elegantně: Zobrazujte validační chyby jasným a stručným způsobem a používejte ARIA atributy k upozornění uživatelů se čtečkami obrazovky na přítomnost chyb.
• Umožněte navigaci pomocí klávesnice: Zajistěte, aby se uživatelé mohli pohybovat formulářem pomocí klávesnice.
• Používejte ARIA atributy: Používejte ARIA atributy k poskytnutí doplňujících informací asistenčním technologiím, jako jsou čtečky obrazovky.

Osvědčené postupy pro používání useFormState

Abyste co nejlépe využili hook useFormState, zvažte následující osvědčené postupy:

• Udržujte serverové akce malé a cílené: Serverové akce by měly být odpovědné za jediný úkol, jako je validace dat formuláře nebo aktualizace databáze. Tím se váš kód stane srozumitelnějším a snadněji udržovatelným.
• Zpracovávejte chyby elegantně: Implementujte robustní zpracování chyb ve vašich serverových akcích, abyste předešli neočekávaným chybám a poskytli uživateli informativní chybové zprávy.
• Používejte validační knihovnu: Zvažte použití validační knihovny jako Zod nebo Yup k zjednodušení logiky validace formuláře.
• Poskytujte uživateli jasnou zpětnou vazbu: Poskytujte uživateli jasnou a včasnou zpětnou vazbu o stavu odeslání formuláře, včetně validačních chyb, úspěšných zpráv a indikátorů načítání.
• Optimalizujte výkon: Minimalizujte množství dat přenášených mezi klientem a serverem pro zlepšení výkonu.

Příklady a případy použití z reálného světa

useFormState lze použít v široké škále reálných aplikací. Zde jsou některé příklady:

• Pokladní formuláře v e-commerce: Zpracování platebních informací, doručovacích adres a souhrnů objednávek.
• Registrační a přihlašovací formuláře: Ověřování uživatelů a vytváření nových účtů.
• Kontaktní formuláře: Sběr dotazů a zpětné vazby od uživatelů.
• Formuláře pro zadávání dat: Zachycování a správa dat v různých aplikacích.
• Průzkumy a kvízy: Sběr odpovědí od uživatelů a poskytování zpětné vazby.

Zvažte například pokladní formulář v e-commerce. Pomocí useFormState můžete na serveru zpracovávat validaci doručovacích adres, platebních informací a dalších detailů objednávky. Tím se zajistí, že data jsou platná před jejich odesláním do databáze, a také se zlepší výkon snížením zpracování na straně klienta.

Dalším příkladem je registrační formulář. Pomocí useFormState můžete na serveru zpracovávat validaci uživatelských jmen, hesel a e-mailových adres. Tím se zajistí, že data jsou bezpečná a že uživatel je správně ověřen.

Závěr

React hook useFormState poskytuje mocný a efektivní způsob správy stavu formuláře a zjednodušení logiky jeho zpracování. Využitím serverových akcí a progresivního vylepšení vám useFormState umožňuje vytvářet robustní, výkonné a přístupné formuláře, které poskytují skvělou uživatelskou zkušenost. Dodržováním osvědčených postupů uvedených v tomto průvodci můžete efektivně používat useFormState k zjednodušení logiky zpracování formulářů a vytváření lepších aplikací v Reactu. Pamatujte na zohlednění globálních standardů přístupnosti a očekávání uživatelů při navrhování formulářů pro rozmanité, mezinárodní publikum.