React useActionState: Celovit vodnik za sodobno upravljanje obrazcev

Svet spletnega razvoja se nenehno razvija in Reactov ekosistem je v ospredju te spremembe. Z nedavnimi različicami je React predstavil zmogljive funkcije, ki temeljito izboljšujejo način, kako gradimo interaktivne in odporne aplikacije. Med najbolj učinkovitimi je hook useActionState, ki spreminja pravila igre pri obravnavi obrazcev in asinhronih operacij. Ta hook, prej znan kot useFormState v eksperimentalnih različicah, je zdaj stabilno in bistveno orodje za vsakega sodobnega React razvijalca.

Ta celovit vodnik vas bo popeljal na globok potop v useActionState. Raziskali bomo težave, ki jih rešuje, njegovo osnovno mehaniko in kako ga izkoristiti skupaj s komplementarnimi hooki, kot je useFormStatus, za ustvarjanje vrhunskih uporabniških izkušenj. Ne glede na to, ali gradite preprost kontaktni obrazec ali kompleksno, podatkovno intenzivno aplikacijo, bo razumevanje useActionState naredilo vašo kodo čistejšo, bolj deklarativno in bolj robustno.

Težava: Kompleksnost tradicionalnega upravljanja stanja obrazcev

Preden lahko cenimo eleganco useActionState, moramo najprej razumeti izzive, ki jih rešuje. Dolga leta je upravljanje stanja obrazcev v Reactu vključevalo predvidljiv, a pogosto okoren vzorec z uporabo hooka useState.

Razmislimo o običajnem scenariju: preprost obrazec za dodajanje novega izdelka na seznam. Upravljati moramo z več elementi stanja:

Vrednost vnosa za ime izdelka.
Stanje nalaganja ali čakanja, da uporabniku zagotovimo povratne informacije med klicem API.
Stanje napake za prikaz sporočil, če oddaja ne uspe.
Stanje uspeha ali sporočilo ob zaključku.

Tipična implementacija bi lahko izgledala nekako takole:

Primer: 'Stari način' z več useState hooki

// Fiktivna funkcija API
const addProductAPI = async (productName) => {
await new Promise(resolve => setTimeout(resolve, 1500));
if (!productName || productName.length < 3) {
throw new Error('Ime izdelka mora biti dolgo vsaj 3 znake.');
}
console.log(`Izdelek "${productName}" je bil dodan.`);
return { success: true };
};

// Komponenta
import { useState } from 'react';

function OldProductForm() {
const [productName, setProductName] = useState('');
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);

const handleSubmit = async (event) => {
event.preventDefault();
setIsPending(true);
setError(null);

try {
await addProductAPI(productName);
setProductName(''); // Počisti vnos ob uspehu
} catch (err) {
setError(err.message);
} finally {
setIsPending(false);
}
};

return (

Ime izdelka:

      

        id="productName"

        name="productName"

        value={productName}

        onChange={(e) => setProductName(e.target.value)}

      />

      

      {error && {error}
}

    

  );

}


Ta pristop deluje, vendar ima več pomanjkljivosti:

  Ponavljajoča se koda: Potrebujemo tri ločene klice useState za upravljanje tega, kar je konceptualno en sam postopek oddaje obrazca.
  Ročno upravljanje stanja: Razvijalec je odgovoren za ročno nastavitev in ponastavitev stanj nalaganja in napak v pravilnem vrstnem redu znotraj bloka try...catch...finally. To se ponavlja in je nagnjeno k napakam.
  Povezovanje: Logika za obravnavo rezultata oddaje obrazca je tesno povezana z logiko izrisa komponente.


Predstavljamo useActionState: Premik paradigme

useActionState je React hook, zasnovan posebej za upravljanje stanja asinhronih dejanj, kot je oddaja obrazca. Poenostavi celoten postopek s povezovanjem stanja neposredno z izidom funkcije dejanja.

Njegova signatura je jasna in jedrnata:
const [state, formAction] = useActionState(actionFn, initialState);

Razčlenimo njegove komponente:

  actionFn(previousState, formData): To je vaša asinhrona funkcija, ki izvaja delo (npr. kliče API). Kot argumente prejme prejšnje stanje in podatke obrazca. Ključno je, da karkoli ta funkcija vrne, postane novo stanje.
  initialState: To je vrednost stanja, preden je bilo dejanje prvič izvedeno.
  state: To je trenutno stanje. Sprva ima initialState in se po vsaki izvedbi posodobi na vrnjeno vrednost vaše actionFn.
  formAction: To je nova, zavita različica vaše funkcije dejanja. To funkcijo morate posredovati lastnosti action elementa <form>. React uporablja to zavito funkcijo za sledenje stanju čakanja dejanja.


Praktični primer: Refaktoriranje z useActionState

Zdaj pa refaktorirajmo naš obrazec za izdelek z uporabo useActionState. Izboljšava je takoj opazna.

Najprej moramo prilagoditi našo logiko dejanja. Namesto da bi metali napake, bi moralo dejanje vrniti objekt stanja, ki opisuje izid.

Primer: 'Novi način' z useActionState

// Funkcija dejanja, zasnovana za delo z useActionState

const addProductAction = async (previousState, formData) => {

  const productName = formData.get('productName');

  await new Promise(resolve => setTimeout(resolve, 1500)); // Simulacija zakasnitve omrežja



  if (!productName || productName.length < 3) {

    return { message: 'Ime izdelka mora biti dolgo vsaj 3 znake.', success: false };

  }



  console.log(`Izdelek "${productName}" je bil dodan.`);

  // Ob uspehu vrnite sporočilo o uspehu in počistite obrazec.

  return { message: `Uspešno dodano "${productName}"`, success: true };

};


// Refaktorirana komponenta

import { useActionState } from 'react';

// Opomba: V naslednjem razdelku bomo dodali useFormStatus za obravnavo stanja čakanja.



function NewProductForm() {

  const initialState = { message: null, success: false };

  const [state, formAction] = useActionState(addProductAction, initialState);



  return (

    


      Ime izdelka:

      

      

      {!state.success && state.message && (

        {state.message}

      )}

      {state.success && state.message && (

        {state.message}

      )}

    

  );

}


Poglejte, kako veliko čisteje je to! Nadomestili smo tri hooke useState z enim samim hookom useActionState. Odgovornost komponente je zdaj izključno izris uporabniškega vmesnika na podlagi objekta `state`. Vsa poslovna logika je lepo zajeta v funkciji `addProductAction`. Stanje se samodejno posodablja glede na to, kar vrne dejanje.

Ampak počakajte, kaj pa stanje čakanja? Kako onemogočimo gumb, medtem ko se obrazec oddaja?

Obravnavanje stanj čakanja z useFormStatus

React ponuja spremljevalni hook, useFormStatus, zasnovan za rešitev te natančne težave. Zagotavlja informacije o stanju za zadnjo oddajo obrazca, vendar z bistvenim pravilom: mora biti poklican iz komponente, ki je izrisana znotraj <form>, katerega stanje želite slediti.

To spodbuja čisto ločitev skrbi. Ustvarite komponento posebej za elemente uporabniškega vmesnika, ki se morajo zavedati stanja oddaje obrazca, kot je gumb za oddajo.

Hook useFormStatus vrne objekt z več lastnostmi, od katerih je najpomembnejša `pending`.
const { pending, data, method, action } = useFormStatus();

  pending: Logična vrednost, ki je `true`, če se nadrejeni obrazec trenutno oddaja, in `false` sicer.
  data: Objekt `FormData`, ki vsebuje podatke, ki se oddajajo.
  method: Niz, ki označuje metodo HTTP (`'get'` ali `'post'`).
  action: Sklicevanje na funkcijo, posredovano lastnosti `action` obrazca.


Ustvarjanje gumba za oddajo, ki se zaveda stanja

Ustvarimo namensko komponento `SubmitButton` in jo integrirajmo v naš obrazec.

Primer: Komponenta SubmitButton
import { useFormStatus } from 'react-dom';

// Opomba: useFormStatus je uvožen iz 'react-dom', ne 'react'.



function SubmitButton() {

  const { pending } = useFormStatus();



  return (

    

  );

}


Zdaj lahko posodobimo našo glavno komponento obrazca, da jo uporabi.

Primer: Celoten obrazec z useActionState in useFormStatus
import { useActionState } from 'react';

import { useFormStatus } from 'react-dom';



// ... (funkcija addProductAction ostane enaka)



function SubmitButton() { /* ... kot je definirano zgoraj ... */ }



function CompleteProductForm() {

  const initialState = { message: null, success: false };

  const [state, formAction] = useActionState(addProductAction, initialState);



  return (

    


      Ime izdelka:

      {/* Lahko dodamo ključ za ponastavitev vnosa ob uspehu */}

      

      

      {!state.success && state.message && (

        {state.message}

      )}

      {state.success && state.message && (

        {state.message}

      )}

    

  );

}


S to strukturo komponenti `CompleteProductForm` ni treba vedeti ničesar o stanju čakanja. `SubmitButton` je popolnoma samozadosten. Ta kompozicijski vzorec je neverjetno močan za gradnjo kompleksnih, vzdržljivih uporabniških vmesnikov.

Moč progresivne izboljšave

Ena najpomembnejših prednosti tega novega pristopa, ki temelji na dejanjih, zlasti če se uporablja s strežniškimi dejanji, je samodejna progresivna izboljšava. To je ključni koncept za gradnjo aplikacij za globalno občinstvo, kjer so omrežne razmere lahko nezanesljive in imajo uporabniki morda starejše naprave ali onemogočen JavaScript.

Evo, kako deluje:

  Brez JavaScripta: Če brskalnik uporabnika ne izvede JavaScripta na strani odjemalca, <form action={...}> deluje kot standardni obrazec HTML. Ustvari zahtevo za celotno stran na strežniku. Če uporabljate ogrodje, kot je Next.js, se izvede dejanje na strani strežnika in ogrodje ponovno izriše celotno stran z novim stanjem (npr. prikaz validacijske napake). Aplikacija je popolnoma funkcionalna, le brez gladkosti, podobne SPA.
  Z JavaScriptom: Ko se JavaScript paket naloži in React hidrira stran, se isto `formAction` izvede na strani odjemalca. Namesto ponovnega nalaganja celotne strani se obnaša kot tipična zahteva za pridobivanje. Dejanje se pokliče, stanje se posodobi in ponovno se izrišejo samo potrebni deli komponente.


To pomeni, da enkrat napišete logiko obrazca in deluje brezhibno v obeh scenarijih. Privzeto gradite odporno, dostopno aplikacijo, kar je velika zmaga za uporabniško izkušnjo po vsem svetu.

Napredni vzorci in primeri uporabe

1. Strežniška dejanja proti odjemalskim dejanjem
Funkcija `actionFn`, ki jo posredujete useActionState, je lahko standardna asinhrona funkcija na strani odjemalca (kot v naših primerih) ali strežniško dejanje. Strežniško dejanje je funkcija, definirana na strežniku, ki jo je mogoče poklicati neposredno iz komponent odjemalca. V ogrodjih, kot je Next.js, jo definirate tako, da na vrhu telesa funkcije dodate direktivo "use server";.


  Odjemalska dejanja: Idealna za mutacije, ki vplivajo samo na stanje na strani odjemalca ali kličejo API-je tretjih oseb neposredno iz odjemalca.
  Strežniška dejanja: Popolna za mutacije, ki vključujejo bazo podatkov ali druge vire na strani strežnika. Poenostavijo vašo arhitekturo z odpravo potrebe po ročnem ustvarjanju končnih točk API za vsako mutacijo.


Lepota je v tem, da useActionState deluje enako z obema. Odjemalsko dejanje lahko zamenjate s strežniškim, ne da bi spremenili kodo komponente.

2. Optimistične posodobitve z `useOptimistic`
Za še bolj odziven občutek lahko kombinirate useActionState s hookom useOptimistic. Optimistična posodobitev je, ko takoj posodobite uporabniški vmesnik, *ob predpostavki*, da bo asinhrono dejanje uspelo. Če ne uspe, vrnete uporabniški vmesnik v prejšnje stanje.

Predstavljajte si aplikacijo za družabne medije, kjer dodate komentar. Optimistično bi takoj prikazali nov komentar na seznamu, medtem ko se zahteva pošilja na strežnik. useOptimistic je zasnovan za delo z dejanji, da bi ta vzorec implementirali preprosto.

3. Ponastavitev obrazca ob uspehu
Pogosta zahteva je, da počistite vnose obrazca po uspešni oddaji. Obstaja več načinov za dosego tega z useActionState.


  Trik z lastnostjo Key: Kot je prikazano v našem primeru `CompleteProductForm`, lahko vhodu ali celotnemu obrazcu dodelite edinstven `key`. Ko se ključ spremeni, bo React odmontiral staro komponento in namestil novo, s čimer bo učinkovito ponastavil njeno stanje. Povezava ključa z zastavico uspeha (`key={state.success ? 'success' : 'initial'}`) je preprosta in učinkovita metoda.
  Nadzorovane komponente: Po potrebi lahko še vedno uporabljate nadzorovane komponente. Z upravljanjem vrednosti vnosa z useState lahko pokličete funkcijo nastavitve, da jo počistite znotraj useEffect, ki posluša stanje uspeha iz useActionState.


Pogoste pasti in najboljše prakse


  Umestitev useFormStatus: Ne pozabite, komponenta, ki kliče useFormStatus, mora biti izrisana kot otrok <form>. Ne bo deloval, če je brat ali starš.
  Serializirano stanje: Pri uporabi strežniških dejanj mora biti objekt stanja, vrnjen iz vašega dejanja, serializiran. To pomeni, da ne more vsebovati funkcij, simbolov ali drugih neserializiranih vrednosti. Držite se navadnih objektov, nizov, nizov, števil in logičnih vrednosti.
  Ne mečite napak v dejanjih: Namesto `throw new Error()`, mora vaša funkcija dejanja obravnavati napake milostno in vrniti objekt stanja, ki opisuje napako (npr. `{ success: false, message: 'Prišlo je do napake' }`). To zagotavlja, da se stanje vedno posodobi predvidljivo.
  Določite jasno obliko stanja: Že od začetka vzpostavite dosledno strukturo za svoj objekt stanja. Oblika, kot je `{ data: T | null, message: string | null, success: boolean, errors: Record | null }`, lahko zajame številne primere uporabe.


useActionState proti useReducer: Hitra primerjava

Na prvi pogled se lahko zdi useActionState podoben useReducer, saj oba vključujeta posodabljanje stanja na podlagi prejšnjega stanja. Vendar pa služita različnim namenom.


  useReducer je hook splošnega namena za upravljanje kompleksnih prehodov stanja na odjemalski strani. Sproži se s pošiljanjem dejanj in je idealen za logiko stanja, ki ima veliko možnih, sinhronih sprememb stanja (npr. zapleten čarovnik z več koraki).
  useActionState je specializiran hook, zasnovan za stanje, ki se spreminja kot odgovor na eno samo, običajno asinhrono dejanje. Njegova primarna vloga je integracija z obrazci HTML, strežniškimi dejanji in Reactovimi funkcijami hkratnega izrisa, kot so prehodi stanja čakanja.


Glavna misel: Za oddajo obrazcev in asinhrone operacije, povezane z obrazci, je useActionState sodobno, namensko orodje. Za druge kompleksne avtomate stanja na strani odjemalca ostaja useReducer odlična izbira.

Sklep: Sprejemanje prihodnosti Reactovih obrazcev

Hook useActionState je več kot le nov API; predstavlja temeljni premik k bolj robustnemu, deklarativnemu in uporabniško usmerjenemu načinu obravnavanja obrazcev in podatkovnih mutacij v Reactu. Z njegovo uporabo pridobite:


  Zmanjšana ponavljajoča se koda: En sam hook nadomešča več klicev useState in ročno orkestracijo stanja.
  Integrirana stanja čakanja: Brezhibno obravnavajte uporabniške vmesnike nalaganja s spremljevalnim hookom useFormStatus.
  Vgrajena progresivna izboljšava: Pišite kodo, ki deluje z ali brez JavaScripta, kar zagotavlja dostopnost in odpornost za vse uporabnike.
  Poenostavljena strežniška komunikacija: Naravna primernost za strežniška dejanja, ki poenostavlja izkušnjo razvoja celotnega sklada.


Ko začenjate nove projekte ali refaktorirate obstoječe, razmislite o uporabi useActionState. Ne samo, da bo izboljšal vašo izkušnjo razvijalca, saj bo vaša koda čistejša in bolj predvidljiva, temveč vas bo tudi opolnomočil za gradnjo kakovostnejših aplikacij, ki so hitrejše, bolj odporne in dostopne raznolikemu globalnemu občinstvu.