1. september 2025Eesti

Avastage Reacti useActionState hook sujuvaks olekuhalduseks asünkroonsete tegevuste kaudu. Parandage oma rakenduse tõhusust ja kasutajakogemust.

Reacti useActionState'i rakendamine: tegevuspõhine olekuhaldus

Reacti useActionState hook, mis on kasutusele võetud hilisemates versioonides, pakub täiustatud lähenemist asünkroonsetest tegevustest tulenevate olekuvärskenduste haldamiseks. See võimas tööriist lihtsustab mutatsioonide käsitlemise, kasutajaliidese värskendamise ja veaolukordade haldamise protsessi, eriti kui töötada Reacti serverikomponentide (RSC) ja serveri tegevustega. See juhend uurib useActionState'i peensusi, pakkudes praktilisi näiteid ja parimaid praktikaid rakendamiseks.

Tegevuspõhise olekuhalduse vajaduse mõistmine

Traditsiooniline Reacti olekuhaldus hõlmab sageli laadimis- ja veaolukordade eraldi haldamist komponentide sees. Kui tegevus (nt vormi esitamine, andmete toomine) käivitab olekuvärskenduse, haldavad arendajad neid olekuid tavaliselt mitme useState'i kutse ja potentsiaalselt keeruka tingimusloogikaga. useActionState pakub puhtamat ja integreeritumat lahendust.

Mõelgem lihtsale vormi esitamise stsenaariumile. Ilma useActionState'ita võiks teil olla:

Olekumuutuja vormi andmete jaoks.
Olekumuutuja, et jälgida, kas vormi esitatakse (laadimisolek).
Olekumuutuja veateadete hoidmiseks.

See lähenemine võib viia paljusõnalise koodi ja potentsiaalsete ebakõladeni. useActionState koondab need mured ühte hooki, lihtsustades loogikat ja parandades koodi loetavust.

useActionState'i tutvustus

useActionState hook aktsepteerib kahte argumenti:

Asünkroonne funktsioon ("tegevus"), mis teostab olekuvärskenduse. See võib olla serveri tegevus või mis tahes asünkroonne funktsioon.
Algne olekuväärtus.

See tagastab massiivi, mis sisaldab kahte elementi:

Hetke olekuväärtus.
Funktsioon tegevuse käivitamiseks (dispatch). See funktsioon haldab automaatselt tegevusega seotud laadimis- ja veaolukordi.

Siin on põhiline näide:


import { useActionState } from 'react';

async function updateServer(prevState, formData) {
  // Simuleerime asünkroonset serveri uuendust.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     return 'Serveri uuendamine ebaõnnestus.';
  }

  return `Nimi uuendatud: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Algne olek');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Nimi:
      
      
      Olek: {state}
    
  );
}

Selles näites:

updateServer on asünkroonne tegevus, mis simuleerib serveri uuendamist. See võtab vastu eelmise oleku ja vormi andmed.
useActionState initsialiseerib oleku väärtusega 'Algne olek' ning tagastab hetke oleku ja dispatch-funktsiooni.
handleSubmit funktsioon kutsub dispatch'i vormi andmetega. useActionState haldab automaatselt laadimis- ja veaolukordi tegevuse täitmise ajal.

Laadimis- ja veaolukordade käsitlemine

Üks useActionState'i peamisi eeliseid on selle sisseehitatud laadimis- ja veaolukordade haldamine. dispatch-funktsioon tagastab promise'i, mis laheneb tegevuse tulemusega. Kui tegevus viskab vea, lükkab promise vea tagasi. Seda saate kasutada kasutajaliidese vastavaks värskendamiseks.

Muudame eelmist näidet, et kuvada laadimisteade ja veateade:


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // Simuleerime asünkroonset serveri uuendust.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Serveri uuendamine ebaõnnestus.');
  }

  return `Nimi uuendatud: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Algne olek');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    setIsSubmitting(true);
    setErrorMessage(null);

    try {
      const result = await dispatch(formData);
      console.log(result);
    } catch (error) {
      console.error("Viga esitamisel:", error);
      setErrorMessage(error.message);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Nimi:
      
      
      {isSubmitting && Laadimine...}
      {errorMessage && Viga: {errorMessage}}
      Olek: {state}
    
  );
}

Põhilised muudatused:

Lisasime isSubmitting ja errorMessage olekumuutujad laadimis- ja veaolukordade jälgimiseks.
handleSubmit funktsioonis seame isSubmitting väärtuseks true enne dispatch kutsumist ja püüame kinni kõik vead, et uuendada errorMessage'i.
Me keelame esitamisnupu esitamise ajal ja kuvame tingimuslikult laadimis- ja veateateid.

useActionState koos serveri tegevustega Reacti serverikomponentides (RSC)

useActionState särab eriti siis, kui seda kasutatakse koos Reacti serverikomponentide (RSC) ja serveri tegevustega. Serveri tegevused on funktsioonid, mis käivitatakse serveris ja võivad otse muuta andmeallikaid. Need võimaldavad teil teha serveripoolseid toiminguid ilma API otspunkte kirjutamata.

Märkus: See näide nõuab Reacti keskkonda, mis on konfigureeritud serverikomponentide ja serveri tegevuste jaoks.


// app/actions.js (Serveri tegevus)
'use server';

import { cookies } from 'next/headers'; //Näide Next.js jaoks

export async function updateName(prevState, formData) {
  const name = formData.get('name');

  if (!name) {
    return 'Palun sisestage nimi.';
  }

  try {
    // Simuleerime andmebaasi uuendust.
    await new Promise(resolve => setTimeout(resolve, 1000));

    cookies().set('userName', name);

    return `Nimi uuendatud: ${name}`; //Õnnestus!

  } catch (error) {
    console.error("Andmebaasi uuendamine ebaõnnestus:", error);
    return 'Nime uuendamine ebaõnnestus.'; // Tähtis: Tagastage sõnum, ärge visake viga (Error)
  }
}


// app/page.jsx (Reacti serverikomponent)
'use client';

import { useActionState } from 'react';
import { updateName } from './actions';

function MyComponent() {
  const [state, dispatch] = useActionState(updateName, 'Algne olek');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Nimi:
      
      
      Olek: {state}
    
  );
}

export default MyComponent;

Selles näites:

updateName on serveri tegevus, mis on defineeritud failis app/actions.js. See võtab vastu eelmise oleku ja vormi andmed, uuendab andmebaasi (simuleeritud) ning tagastab edu- või veateate. Oluline on, et tegevus tagastab sõnumi, mitte ei viska viga. Serveri tegevused eelistavad informatiivsete sõnumite tagastamist.
Komponent on märgitud kliendikomponendiks ('use client'), et kasutada useActionState hooki.
handleSubmit funktsioon kutsub dispatch'i vormi andmetega. useActionState haldab automaatselt olekuvärskendust vastavalt serveri tegevuse tulemusele.

Olulised kaalutlused serveri tegevuste puhul

Vigade käsitlemine serveri tegevustes: Vigade viskamise asemel tagastage oma serveri tegevusest tähendusrikas veateade. useActionState käsitleb seda teadet uue olekuna. See võimaldab sujuvat veakäsitlust kliendi poolel.
Optimistlikud uuendused: Serveri tegevusi saab kasutada koos optimistlike uuendustega, et parandada tajutavat jõudlust. Saate kasutajaliidest kohe uuendada ja tühistada muudatuse, kui tegevus ebaõnnestub.
Uuesti valideerimine: Pärast edukat mutatsiooni kaaluge vahemällu salvestatud andmete uuesti valideerimist, et tagada kasutajaliidese vastavus uusimale olekule.

useActionState'i täiustatud tehnikad

1. Redutseerija kasutamine keerukate olekuvärskenduste jaoks

Keerukama olekuloogika jaoks saate kombineerida useActionState'i redutseerija (reducer) funktsiooniga. See võimaldab teil hallata olekuvärskendusi prognoositaval ja hooldataval viisil.


import { useActionState } from 'react';
import { useReducer } from 'react';

const initialState = {
  count: 0,
  message: 'Algne olek',
};

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

async function updateState(state, action) {
  // Simuleerime asünkroonset operatsiooni.
  await new Promise(resolve => setTimeout(resolve, 500));

  switch (action.type) {
    case 'INCREMENT':
      return reducer(state, action);
    case 'DECREMENT':
      return reducer(state, action);
    case 'SET_MESSAGE':
      return reducer(state, action);
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateState, initialState);

  return (
    
      Arv: {state.count}
      Sõnum: {state.message}
      
      
      
    
  );
}

2. Optimistlikud uuendused useActionState'iga

Optimistlikud uuendused parandavad kasutajakogemust, värskendades koheselt kasutajaliidest, justkui oleks tegevus õnnestunud, ja seejärel tühistades uuenduse, kui tegevus ebaõnnestub. See võib muuta teie rakenduse tundlikumaks.


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // Simuleerime asünkroonset serveri uuendust.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Serveri uuendamine ebaõnnestus.');
  }

  return `Nimi uuendatud: ${data.name}`;
}

function MyComponent() {
  const [name, setName] = useState('Algne nimi');
  const [state, dispatch] = useActionState(async (prevName, newName) => {
    try {
      const result = await updateServer(prevName, {
        name: newName,
      });
      return newName; // Uuenda õnnestumise korral
    } catch (error) {
      // Tühista vea korral
      console.error("Uuendamine ebaõnnestus:", error);
      setName(prevName);
      return prevName;
    }
  }, name);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newName = formData.get('name');
    setName(newName); // Uuenda kasutajaliidest optimistlikult
    await dispatch(newName);
  }

  return (
    
      Nimi:
      
      
      Praegune nimi: {name}
      Olek: {state}
    
  );
}

3. Tegevuste viivitamine (Debouncing)

Mõnes olukorras võite soovida tegevusi viivitada (debounce), et vältida nende liiga sagedast käivitamist. See võib olla kasulik näiteks otsingusisendite puhul, kus soovite tegevuse käivitada alles siis, kui kasutaja on teatud aja jooksul tippimise lõpetanud.


import { useActionState } from 'react';
import { useState, useEffect } from 'react';

async function searchItems(prevState, query) {
  // Simuleerime asünkroonset otsingut.
  await new Promise(resolve => setTimeout(resolve, 500));

  return `Otsingutulemused päringule: ${query}`;
}

function MyComponent() {
  const [query, setQuery] = useState('');
  const [state, dispatch] = useActionState(searchItems, 'Algne olek');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (query) {
        dispatch(query);
      }
    }, 300); // Viivitus 300ms

    return () => clearTimeout(timeoutId);
  }, [query, dispatch]);

  return (
    
      Otsing:
       setQuery(e.target.value)}
      />
      Olek: {state}
    
  );
}

Parimad praktikad useActionState'i kasutamisel

Hoidke tegevused puhtad: Veenduge, et teie tegevused oleksid puhtad funktsioonid (või nii lähedal sellele kui võimalik). Neil ei tohiks olla muid kõrvalmõjusid peale oleku uuendamise.
Käsitlege vigu sujuvalt: Käsitlege alati vigu oma tegevustes ja pakkuge kasutajale informatiivseid veateateid. Nagu eespool serveri tegevuste puhul märgitud, eelistage serveri tegevusest veateate stringi tagastamist, mitte vea viskamist.
Optimeerige jõudlust: Olge teadlik oma tegevuste jõudlusmõjudest, eriti suurte andmekogumitega tegelemisel. Kaaluge memoiseerimistehnikate kasutamist, et vältida tarbetuid uuesti renderdamisi.
Kaaluge ligipääsetavust: Veenduge, et teie rakendus jääks ligipääsetavaks kõigile kasutajatele, sealhulgas puuetega inimestele. Pakkuge sobivaid ARIA atribuute ja klaviatuurinavigatsiooni.
Põhjalik testimine: Kirjutage ühik- ja integratsiooniteste, et tagada teie tegevuste ja olekuvärskenduste korrektne toimimine.
Rahvusvahelistamine (i18n): Globaalsete rakenduste jaoks rakendage i18n, et toetada mitut keelt ja kultuuri.
Lokaliseerimine (l10n): Kohandage oma rakendus konkreetsetele lokaatidele, pakkudes lokaliseeritud sisu, kuupäevavorminguid ja valuutasümboleid.

useActionState vs. teised olekuhalduse lahendused

Kuigi useActionState pakub mugavat viisi tegevuspõhiste olekuvärskenduste haldamiseks, ei asenda see kõiki olekuhalduse lahendusi. Keerukate rakenduste puhul, kus on globaalne olek, mida tuleb jagada mitme komponendi vahel, võivad raamistikud nagu Redux, Zustand või Jotai olla sobivamad.

Millal kasutada useActionState'i:

Lihtsa kuni mõõduka keerukusega olekuvärskendused.
Olekumuuendused, mis on tihedalt seotud asünkroonsete tegevustega.
Integratsioon Reacti serverikomponentide ja serveri tegevustega.

Millal kaaluda teisi lahendusi:

Keerukas globaalne olekuhaldus.
Olek, mida tuleb jagada suure hulga komponentide vahel.
Täiustatud funktsioonid nagu ajas rändamise silumine (time-travel debugging) või vahevara (middleware).

Kokkuvõte

Reacti useActionState hook pakub võimsat ja elegantset viisi asünkroonsete tegevuste poolt käivitatud olekuvärskenduste haldamiseks. Koondades laadimis- ja veaolukorrad, lihtsustab see koodi ja parandab loetavust, eriti töötades Reacti serverikomponentide ja serveri tegevustega. Selle tugevuste ja piirangute mõistmine võimaldab teil valida oma rakenduse jaoks õige olekuhalduse lähenemisviisi, mis viib hooldatavama ja tõhusama koodini.

Järgides selles juhendis toodud parimaid praktikaid, saate tõhusalt kasutada useActionState'i oma rakenduse kasutajakogemuse ja arendustöövoo parandamiseks. Pidage meeles, et peate arvestama oma rakenduse keerukusega ja valima olekuhalduse lahenduse, mis vastab kõige paremini teie vajadustele. Alates lihtsatest vormide esitamistest kuni keerukate andmete mutatsioonideni võib useActionState olla väärtuslik tööriist teie Reacti arendusarsenalis.