1 września 2025Polski

Odkryj hook useActionState w React do usprawnionego zarządzania stanem wyzwalanego przez akcje asynchroniczne. Popraw wydajność i doświadczenie użytkownika.

Implementacja React useActionState: Zarządzanie Stanem Oparte na Akcjach

Hook useActionState w React, wprowadzony w ostatnich wersjach, oferuje dopracowane podejście do zarządzania aktualizacjami stanu wynikającymi z akcji asynchronicznych. To potężne narzędzie usprawnia proces obsługi mutacji, aktualizacji interfejsu użytkownika (UI) i zarządzania stanami błędów, zwłaszcza podczas pracy z React Server Components (RSC) i akcjami serwerowymi. Ten przewodnik dogłębnie omówi hook useActionState, dostarczając praktycznych przykładów i najlepszych praktyk implementacji.

Zrozumienie Potrzeby Zarządzania Stanem Opartego na Akcjach

Tradycyjne zarządzanie stanem w React często wiąże się z osobnym zarządzaniem stanami ładowania i błędów wewnątrz komponentów. Gdy akcja (np. wysłanie formularza, pobranie danych) wywołuje aktualizację stanu, deweloperzy zazwyczaj zarządzają tymi stanami za pomocą wielu wywołań useState i potencjalnie złożonej logiki warunkowej. useActionState dostarcza czystsze i bardziej zintegrowane rozwiązanie.

Rozważmy prosty scenariusz wysyłania formularza. Bez useActionState, moglibyśmy mieć:

Zmienną stanu dla danych formularza.
Zmienną stanu do śledzenia, czy formularz jest wysyłany (stan ładowania).
Zmienną stanu do przechowywania komunikatów o błędach.

Takie podejście może prowadzić do rozwlekłego kodu i potencjalnych niespójności. useActionState konsoliduje te zagadnienia w jednym hooku, upraszczając logikę i poprawiając czytelność kodu.

Wprowadzenie do useActionState

Hook useActionState przyjmuje dwa argumenty:

Asynchroniczną funkcję ("akcję"), która wykonuje aktualizację stanu. Może to być akcja serwerowa lub dowolna funkcja asynchroniczna.
Początkową wartość stanu.

Zwraca tablicę zawierającą dwa elementy:

Bieżącą wartość stanu.
Funkcję do wywołania akcji. Ta funkcja automatycznie zarządza stanami ładowania i błędów związanymi z akcją.

Oto podstawowy przykład:


import { useActionState } from 'react';

async function updateServer(prevState, formData) {
  // Symulacja asynchronicznej aktualizacji serwera.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     return 'Nie udało się zaktualizować serwera.';
  }

  return `Zaktualizowano imię na: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Stan Początkowy');

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

  return (
    
      Imię:
      
      
      Stan: {state}
    
  );
}

W tym przykładzie:

updateServer to asynchroniczna akcja, która symuluje aktualizację serwera. Otrzymuje poprzedni stan oraz dane z formularza.
useActionState inicjalizuje stan wartością 'Stan Początkowy' i zwraca bieżący stan oraz funkcję dispatch.
Funkcja handleSubmit wywołuje dispatch z danymi formularza. useActionState automatycznie obsługuje stany ładowania i błędów podczas wykonywania akcji.

Obsługa Stanów Ładowania i Błędów

Jedną z kluczowych zalet useActionState jest wbudowane zarządzanie stanami ładowania i błędów. Funkcja dispatch zwraca obietnicę (promise), która rozwiązuje się z wynikiem akcji. Jeśli akcja zgłosi błąd, obietnica zostanie odrzucona z tym błędem. Można to wykorzystać do odpowiedniej aktualizacji interfejsu użytkownika.

Zmodyfikujmy poprzedni przykład, aby wyświetlać komunikat o ładowaniu i komunikat o błędzie:


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

async function updateServer(prevState, formData) {
  // Symulacja asynchronicznej aktualizacji serwera.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Nie udało się zaktualizować serwera.');
  }

  return `Zaktualizowano imię na: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Stan Początkowy');
  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("Błąd podczas wysyłania:", error);
      setErrorMessage(error.message);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Imię:
      
      
      {isSubmitting && Ładowanie...}
      {errorMessage && Błąd: {errorMessage}}
      Stan: {state}
    
  );
}

Kluczowe zmiany:

Dodaliśmy zmienne stanu isSubmitting i errorMessage do śledzenia stanów ładowania i błędów.
W handleSubmit, ustawiamy isSubmitting na true przed wywołaniem dispatch i łapiemy wszelkie błędy, aby zaktualizować errorMessage.
Wyłączamy przycisk wysyłania podczas przesyłania i warunkowo wyświetlamy komunikaty o ładowaniu i błędach.

useActionState z Akcjami Serwerowymi w React Server Components (RSC)

useActionState pokazuje swoją siłę, gdy jest używany z React Server Components (RSC) i akcjami serwerowymi. Akcje serwerowe to funkcje, które działają na serwerze i mogą bezpośrednio modyfikować źródła danych. Pozwalają one na wykonywanie operacji po stronie serwera bez pisania punktów końcowych API.

Uwaga: Ten przykład wymaga środowiska React skonfigurowanego do obsługi Server Components i Server Actions.


// app/actions.js (Akcja Serwerowa)
'use server';

import { cookies } from 'next/headers'; //Przykład dla Next.js

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

  if (!name) {
    return 'Proszę podać imię.';
  }

  try {
    // Symulacja aktualizacji bazy danych.
    await new Promise(resolve => setTimeout(resolve, 1000));

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

    return `Zaktualizowano imię na: ${name}`; //Sukces!

  } catch (error) {
    console.error("Aktualizacja bazy danych nie powiodła się:", error);
    return 'Nie udało się zaktualizować imienia.'; // Ważne: Zwróć komunikat, a nie rzucaj błędu (Error)
  }
}


// app/page.jsx (React Server Component)
'use client';

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

function MyComponent() {
  const [state, dispatch] = useActionState(updateName, 'Stan Początkowy');

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

  return (
    
      Imię:
      
      
      Stan: {state}
    
  );
}

export default MyComponent;

W tym przykładzie:

updateName to akcja serwerowa zdefiniowana w app/actions.js. Otrzymuje ona poprzedni stan i dane z formularza, aktualizuje bazę danych (symulacja) i zwraca komunikat o sukcesie lub błędzie. Co kluczowe, akcja zwraca komunikat, a nie rzuca błędu. Akcje Serwerowe preferują zwracanie informacyjnych komunikatów.
Komponent jest oznaczony jako komponent kliencki ('use client'), aby móc używać hooka useActionState.
Funkcja handleSubmit wywołuje dispatch z danymi z formularza. useActionState automatycznie zarządza aktualizacją stanu na podstawie wyniku akcji serwerowej.

Ważne Kwestie Dotyczące Akcji Serwerowych

Obsługa Błędów w Akcjach Serwerowych: Zamiast rzucać błędy, zwracaj znaczący komunikat o błędzie z Akcji Serwerowej. useActionState potraktuje ten komunikat jako nowy stan. Pozwala to na elegancką obsługę błędów po stronie klienta.
Optymistyczne Aktualizacje: Akcje serwerowe mogą być używane z optymistycznymi aktualizacjami w celu poprawy postrzeganej wydajności. Możesz natychmiast zaktualizować interfejs użytkownika i cofnąć zmiany, jeśli akcja się nie powiedzie.
Ponowna Walidacja: Po udanej mutacji rozważ ponowną walidację buforowanych danych, aby upewnić się, że interfejs użytkownika odzwierciedla najnowszy stan.

Zaawansowane Techniki z useActionState

1. Użycie Reducera do Złożonych Aktualizacji Stanu

W przypadku bardziej złożonej logiki stanu, można połączyć useActionState z funkcją reducera. Pozwala to zarządzać aktualizacjami stanu w przewidywalny i łatwy do utrzymania sposób.


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

const initialState = {
  count: 0,
  message: 'Stan Początkowy',
};

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) {
  // Symulacja operacji asynchronicznej.
  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 (
    
      Licznik: {state.count}
      Wiadomość: {state.message}
      
      
      
    
  );
}

2. Optymistyczne Aktualizacje z useActionState

Optymistyczne aktualizacje poprawiają doświadczenie użytkownika, natychmiast aktualizując interfejs użytkownika, tak jakby akcja zakończyła się sukcesem, a następnie cofając aktualizację, jeśli akcja się nie powiedzie. Dzięki temu aplikacja może wydawać się bardziej responsywna.


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

async function updateServer(prevState, formData) {
  // Symulacja asynchronicznej aktualizacji serwera.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Nie udało się zaktualizować serwera.');
  }

  return `Zaktualizowano imię na: ${data.name}`;
}

function MyComponent() {
  const [name, setName] = useState('Imię Początkowe');
  const [state, dispatch] = useActionState(async (prevName, newName) => {
    try {
      const result = await updateServer(prevName, {
        name: newName,
      });
      return newName; // Aktualizuj w przypadku sukcesu
    } catch (error) {
      // Wycofaj w przypadku błędu
      console.error("Aktualizacja nie powiodła się:", 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); // Optymistycznie zaktualizuj UI
    await dispatch(newName);
  }

  return (
    
      Imię:
      
      
      Bieżące Imię: {name}
      Stan: {state}
    
  );
}

3. Debouncing Akcji

W niektórych scenariuszach można chcieć zastosować debouncing akcji, aby zapobiec ich zbyt częstemu wywoływaniu. Może to być przydatne w przypadku takich scenariuszy jak pola wyszukiwania, gdzie chcemy wywołać akcję dopiero po tym, jak użytkownik przestanie pisać przez określony czas.


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

async function searchItems(prevState, query) {
  // Symulacja asynchronicznego wyszukiwania.
  await new Promise(resolve => setTimeout(resolve, 500));

  return `Wyniki wyszukiwania dla: ${query}`;
}

function MyComponent() {
  const [query, setQuery] = useState('');
  const [state, dispatch] = useActionState(searchItems, 'Stan Początkowy');

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

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

  return (
    
      Szukaj:
       setQuery(e.target.value)}
      />
      Stan: {state}
    
  );
}

Najlepsze Praktyki dla useActionState

Zachowaj Czystość Akcji: Upewnij się, że Twoje akcje są czystymi funkcjami (lub tak blisko, jak to możliwe). Nie powinny mieć efektów ubocznych innych niż aktualizacja stanu.
Elegancka Obsługa Błędów: Zawsze obsługuj błędy w swoich akcjach i dostarczaj użytkownikowi informacyjne komunikaty o błędach. Jak wspomniano wyżej w przypadku Akcji Serwerowych, preferuj zwracanie ciągu znaków z komunikatem o błędzie z akcji serwerowej, zamiast rzucania błędu.
Optymalizuj Wydajność: Bądź świadomy implikacji wydajnościowych swoich akcji, zwłaszcza przy pracy z dużymi zbiorami danych. Rozważ użycie technik memoizacji, aby unikać niepotrzebnych ponownych renderowań.
Pamiętaj o Dostępności: Upewnij się, że Twoja aplikacja pozostaje dostępna dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Zapewnij odpowiednie atrybuty ARIA i nawigację za pomocą klawiatury.
Dokładne Testowanie: Pisz testy jednostkowe i integracyjne, aby upewnić się, że Twoje akcje i aktualizacje stanu działają poprawnie.
Internacjonalizacja (i18n): W przypadku globalnych aplikacji zaimplementuj i18n, aby wspierać wiele języków i kultur.
Lokalizacja (l10n): Dostosuj swoją aplikację do określonych regionów, dostarczając zlokalizowaną treść, formaty dat i symbole walut.

useActionState kontra Inne Rozwiązania do Zarządzania Stanem

Chociaż useActionState zapewnia wygodny sposób zarządzania aktualizacjami stanu opartymi na akcjach, nie jest zamiennikiem dla wszystkich rozwiązań do zarządzania stanem. W przypadku złożonych aplikacji z globalnym stanem, który musi być współdzielony między wieloma komponentami, biblioteki takie jak Redux, Zustand czy Jotai mogą być bardziej odpowiednie.

Kiedy używać useActionState:

Aktualizacje stanu o prostej do umiarkowanej złożoności.
Aktualizacje stanu ściśle powiązane z akcjami asynchronicznymi.
Integracja z React Server Components i Akcjami Serwerowymi.

Kiedy rozważyć inne rozwiązania:

Złożone zarządzanie stanem globalnym.
Stan, który musi być współdzielony przez dużą liczbę komponentów.
Zaawansowane funkcje, takie jak debugowanie w czasie (time-travel debugging) czy middleware.

Podsumowanie

Hook useActionState w React oferuje potężny i elegancki sposób zarządzania aktualizacjami stanu wyzwalanymi przez akcje asynchroniczne. Poprzez konsolidację stanów ładowania i błędów, upraszcza kod i poprawia czytelność, szczególnie podczas pracy z React Server Components i akcjami serwerowymi. Zrozumienie jego mocnych stron i ograniczeń pozwala wybrać odpowiednie podejście do zarządzania stanem w Twojej aplikacji, co prowadzi do łatwiejszego w utrzymaniu i bardziej wydajnego kodu.

Postępując zgodnie z najlepszymi praktykami opisanymi w tym przewodniku, możesz skutecznie wykorzystać useActionState do poprawy doświadczenia użytkownika i przepływu pracy deweloperskiej w swojej aplikacji. Pamiętaj, aby wziąć pod uwagę złożoność swojej aplikacji i wybrać rozwiązanie do zarządzania stanem, które najlepiej odpowiada Twoim potrzebom. Od prostych wysyłek formularzy po złożone mutacje danych, useActionState może być cennym narzędziem w Twoim arsenale deweloperskim React.