Implementierung von React useActionState: Aktionsbasiertes Zustandsmanagement

Der useActionState-Hook von React, der in neueren Versionen eingeführt wurde, bietet einen verfeinerten Ansatz zur Verwaltung von Zustandsaktualisierungen, die aus asynchronen Aktionen resultieren. Dieses leistungsstarke Werkzeug optimiert den Prozess der Handhabung von Mutationen, der Aktualisierung der Benutzeroberfläche und der Verwaltung von Fehlerzuständen, insbesondere bei der Arbeit mit React Server Components (RSC) und Server Actions. Dieser Leitfaden wird die Feinheiten von useActionState untersuchen und praktische Beispiele sowie bewährte Methoden für die Implementierung bereitstellen.

Die Notwendigkeit des aktionsbasierten Zustandsmanagements verstehen

Traditionelles React-Zustandsmanagement beinhaltet oft die separate Verwaltung von Lade- und Fehlerzuständen innerhalb von Komponenten. Wenn eine Aktion (z. B. das Absenden eines Formulars, das Abrufen von Daten) eine Zustandsaktualisierung auslöst, verwalten Entwickler diese Zustände typischerweise mit mehreren useState-Aufrufen und potenziell komplexer bedingter Logik. useActionState bietet eine sauberere und stärker integrierte Lösung.

Betrachten wir ein einfaches Formularübermittlungsszenario. Ohne useActionState hätten Sie möglicherweise:

• Eine Zustandsvariable für die Formulardaten.
• Eine Zustandsvariable, um zu verfolgen, ob das Formular gesendet wird (Ladezustand).
• Eine Zustandsvariable, um eventuelle Fehlermeldungen zu speichern.

Dieser Ansatz kann zu ausführlichem Code und potenziellen Inkonsistenzen führen. useActionState konsolidiert diese Anliegen in einem einzigen Hook, was die Logik vereinfacht und die Lesbarkeit des Codes verbessert.

Einführung in useActionState

Der useActionState-Hook akzeptiert zwei Argumente:

1. Eine asynchrone Funktion (die „Aktion“), die die Zustandsaktualisierung durchführt. Dies kann eine Server Action oder eine beliebige asynchrone Funktion sein.
2. Ein initialer Zustandswert.

Er gibt ein Array zurück, das zwei Elemente enthält:

1. Der aktuelle Zustandswert.
2. Eine Funktion zum Auslösen der Aktion. Diese Funktion verwaltet automatisch die mit der Aktion verbundenen Lade- und Fehlerzustände.

Hier ist ein grundlegendes Beispiel:

import { useActionState } from 'react'; async function updateServer(prevState, formData) { // Simuliert ein asynchrones Server-Update. await new Promise(resolve => setTimeout(resolve, 1000)); const data = Object.fromEntries(formData); if (data.name === "error") { return 'Server-Update fehlgeschlagen.'; } return `Name aktualisiert auf: ${data.name}`; } function MyComponent() { const [state, dispatch] = useActionState(updateServer, 'Initialer Zustand'); async function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const result = await dispatch(formData); console.log(result); } return (

Name: Aktualisieren

Zustand: {state}

); }

In diesem Beispiel:

• updateServer ist die asynchrone Aktion, die die Aktualisierung eines Servers simuliert. Sie erhält den vorherigen Zustand und die Formulardaten.
• useActionState initialisiert den Zustand mit 'Initialer Zustand' und gibt den aktuellen Zustand sowie die dispatch-Funktion zurück.
• Die handleSubmit-Funktion ruft dispatch mit den Formulardaten auf. useActionState behandelt automatisch die Lade- und Fehlerzustände während der Ausführung der Aktion.

Umgang mit Lade- und Fehlerzuständen

Einer der Hauptvorteile von useActionState ist die integrierte Verwaltung von Lade- und Fehlerzuständen. Die dispatch-Funktion gibt ein Promise zurück, das mit dem Ergebnis der Aktion aufgelöst wird. Wenn die Aktion einen Fehler auslöst, wird das Promise mit dem Fehler zurückgewiesen. Sie können dies nutzen, um die Benutzeroberfläche entsprechend zu aktualisieren.

Ändern Sie das vorherige Beispiel, um eine Lade- und eine Fehlermeldung anzuzeigen:

import { useActionState } from 'react'; import { useState } from 'react'; async function updateServer(prevState, formData) { // Simuliert ein asynchrones Server-Update. await new Promise(resolve => setTimeout(resolve, 1000)); const data = Object.fromEntries(formData); if (data.name === "error") { throw new Error('Server-Update fehlgeschlagen.'); } return `Name aktualisiert auf: ${data.name}`; } function MyComponent() { const [state, dispatch] = useActionState(updateServer, 'Initialer Zustand'); 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("Fehler bei der Übermittlung:", error); setErrorMessage(error.message); } finally { setIsSubmitting(false); } } return (

Name: Aktualisieren {isSubmitting &&

Wird geladen...

} {errorMessage &&

Fehler: {errorMessage}

}

Zustand: {state}

); }

Wichtige Änderungen:

• Wir haben die Zustandsvariablen isSubmitting und errorMessage hinzugefügt, um die Lade- und Fehlerzustände zu verfolgen.
• In handleSubmit setzen wir isSubmitting auf true, bevor wir dispatch aufrufen, und fangen eventuelle Fehler ab, um errorMessage zu aktualisieren.
• Wir deaktivieren den Senden-Button während der Übermittlung und zeigen die Lade- und Fehlermeldungen bedingt an.

useActionState mit Server Actions in React Server Components (RSC)

useActionState glänzt besonders in der Verwendung mit React Server Components (RSC) und Server Actions. Server Actions sind Funktionen, die auf dem Server ausgeführt werden und Datenquellen direkt verändern können. Sie ermöglichen es Ihnen, serverseitige Operationen durchzuführen, ohne API-Endpunkte schreiben zu müssen.

Hinweis: Dieses Beispiel erfordert eine React-Umgebung, die für Server Components und Server Actions konfiguriert ist.

// app/actions.js (Server-Aktion) 'use server'; import { cookies } from 'next/headers'; // Beispiel, für Next.js export async function updateName(prevState, formData) { const name = formData.get('name'); if (!name) { return 'Bitte geben Sie einen Namen ein.'; } try { // Simuliert Datenbank-Update. await new Promise(resolve => setTimeout(resolve, 1000)); cookies().set('userName', name); return `Name aktualisiert auf: ${name}`; // Erfolg! } catch (error) { console.error("Datenbank-Update fehlgeschlagen:", error); return 'Name konnte nicht aktualisiert werden.'; // Wichtig: Geben Sie eine Nachricht zurück, werfen Sie keinen Fehler } } // app/page.jsx (React Server Komponente) 'use client'; import { useActionState } from 'react'; import { updateName } from './actions'; function MyComponent() { const [state, dispatch] = useActionState(updateName, 'Initialer Zustand'); async function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const result = await dispatch(formData); console.log(result); } return (

Name: Aktualisieren

Zustand: {state}

); } export default MyComponent;

In diesem Beispiel:

• updateName ist eine Server Action, die in app/actions.js definiert ist. Sie erhält den vorherigen Zustand und die Formulardaten, aktualisiert die Datenbank (simuliert) und gibt eine Erfolgs- oder Fehlermeldung zurück. Entscheidend ist, dass die Aktion eine Nachricht zurückgibt, anstatt einen Fehler zu werfen. Server Actions bevorzugen die Rückgabe informativer Nachrichten.
• Die Komponente ist als Client-Komponente ('use client') gekennzeichnet, um den useActionState-Hook zu verwenden.
• Die handleSubmit-Funktion ruft dispatch mit den Formulardaten auf. useActionState verwaltet die Zustandsaktualisierung automatisch basierend auf dem Ergebnis der Server Action.

Wichtige Überlegungen zu Server Actions

• Fehlerbehandlung in Server Actions: Anstatt Fehler zu werfen, geben Sie eine aussagekräftige Fehlermeldung von Ihrer Server Action zurück. useActionState wird diese Nachricht als neuen Zustand behandeln. Dies ermöglicht eine saubere Fehlerbehandlung auf dem Client.
• Optimistische Updates: Server Actions können mit optimistischen Updates verwendet werden, um die wahrgenommene Leistung zu verbessern. Sie können die Benutzeroberfläche sofort aktualisieren und die Änderung zurücknehmen, falls die Aktion fehlschlägt.
• Revalidierung: Nach einer erfolgreichen Mutation sollten Sie zwischengespeicherte Daten revalidieren, um sicherzustellen, dass die Benutzeroberfläche den neuesten Zustand widerspiegelt.

Fortgeschrittene useActionState-Techniken

1. Verwendung eines Reducers für komplexe Zustandsaktualisierungen

Für komplexere Zustandslogik können Sie useActionState mit einer Reducer-Funktion kombinieren. Dies ermöglicht es Ihnen, Zustandsaktualisierungen auf eine vorhersagbare und wartbare Weise zu verwalten.

import { useActionState } from 'react'; import { useReducer } from 'react'; const initialState = { count: 0, message: 'Initialer Zustand', }; 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) { // Simuliert asynchrone Operation. 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 (

Zähler: {state.count}

Nachricht: {state.message}

dispatch({ type: 'INCREMENT' })}>Inkrementieren dispatch({ type: 'DECREMENT' })}>Dekrementieren dispatch({ type: 'SET_MESSAGE', payload: 'Neue Nachricht' })}>Nachricht setzen

); }

2. Optimistische Updates mit useActionState

Optimistische Updates verbessern die Benutzererfahrung, indem sie die Benutzeroberfläche sofort aktualisieren, als ob die Aktion erfolgreich wäre, und die Aktualisierung dann zurücknehmen, wenn die Aktion fehlschlägt. Dies kann Ihre Anwendung reaktionsschneller erscheinen lassen.

import { useActionState } from 'react'; import { useState } from 'react'; async function updateServer(prevState, formData) { // Simuliert ein asynchrones Server-Update. await new Promise(resolve => setTimeout(resolve, 1000)); const data = Object.fromEntries(formData); if (data.name === "error") { throw new Error('Server-Update fehlgeschlagen.'); } return `Name aktualisiert auf: ${data.name}`; } function MyComponent() { const [name, setName] = useState('Initialer Name'); const [state, dispatch] = useActionState(async (prevName, newName) => { try { const result = await updateServer(prevName, { name: newName, }); return newName; // Bei Erfolg aktualisieren } catch (error) { // Bei Fehler zurücksetzen console.error("Update fehlgeschlagen:", 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); // UI optimistisch aktualisieren await dispatch(newName); } return (

Name: Aktualisieren

Aktueller Name: {name}

Zustand: {state}

); }

3. Aktionen entprellen (Debouncing)

In einigen Szenarien möchten Sie Aktionen möglicherweise entprellen, um zu verhindern, dass sie zu häufig ausgelöst werden. Dies kann nützlich sein für Szenarien wie Sucheingaben, bei denen Sie eine Aktion erst auslösen möchten, nachdem der Benutzer für einen bestimmten Zeitraum die Eingabe beendet hat.

import { useActionState } from 'react'; import { useState, useEffect } from 'react'; async function searchItems(prevState, query) { // Simuliert asynchrone Suche. await new Promise(resolve => setTimeout(resolve, 500)); return `Suchergebnisse für: ${query}`; } function MyComponent() { const [query, setQuery] = useState(''); const [state, dispatch] = useActionState(searchItems, 'Initialer Zustand'); useEffect(() => { const timeoutId = setTimeout(() => { if (query) { dispatch(query); } }, 300); // Entprellen für 300ms return () => clearTimeout(timeoutId); }, [query, dispatch]); return (

Suche: setQuery(e.target.value)} />

Zustand: {state}

); }

Best Practices für useActionState

• Aktionen rein halten: Stellen Sie sicher, dass Ihre Aktionen reine Funktionen sind (oder so nah wie möglich daran). Sie sollten keine Nebeneffekte haben, außer den Zustand zu aktualisieren.
• Fehler elegant behandeln: Behandeln Sie Fehler in Ihren Aktionen immer und geben Sie dem Benutzer informative Fehlermeldungen. Wie oben bei Server Actions erwähnt, bevorzugen Sie die Rückgabe einer Fehlermeldungs-Zeichenkette von der Server Action anstatt einen Fehler zu werfen.
• Leistung optimieren: Achten Sie auf die Leistungsauswirkungen Ihrer Aktionen, insbesondere beim Umgang mit großen Datenmengen. Erwägen Sie die Verwendung von Memoization-Techniken, um unnötige Neu-Renderings zu vermeiden.
• Barrierefreiheit berücksichtigen: Stellen Sie sicher, dass Ihre Anwendung für alle Benutzer zugänglich bleibt, einschließlich derer mit Behinderungen. Stellen Sie geeignete ARIA-Attribute und Tastaturnavigation bereit.
• Gründliches Testen: Schreiben Sie Unit-Tests und Integrationstests, um sicherzustellen, dass Ihre Aktionen und Zustandsaktualisierungen korrekt funktionieren.
• Internationalisierung (i18n): Implementieren Sie für globale Anwendungen i18n, um mehrere Sprachen und Kulturen zu unterstützen.
• Lokalisierung (l10n): Passen Sie Ihre Anwendung an bestimmte Standorte an, indem Sie lokalisierte Inhalte, Datumsformate und Währungssymbole bereitstellen.

useActionState im Vergleich zu anderen Zustandsmanagement-Lösungen

Obwohl useActionState eine bequeme Möglichkeit zur Verwaltung aktionsbasierter Zustandsaktualisierungen bietet, ist es kein Ersatz für alle Zustandsmanagement-Lösungen. Für komplexe Anwendungen mit globalem Zustand, der über mehrere Komponenten hinweg geteilt werden muss, könnten Bibliotheken wie Redux, Zustand oder Jotai besser geeignet sein.

Wann sollte useActionState verwendet werden:

• Zustandsaktualisierungen von einfacher bis mittlerer Komplexität.
• Zustandsaktualisierungen, die eng mit asynchronen Aktionen gekoppelt sind.
• Integration mit React Server Components und Server Actions.

Wann sollten andere Lösungen in Betracht gezogen werden:

• Komplexes globales Zustandsmanagement.
• Zustand, der über eine große Anzahl von Komponenten hinweg geteilt werden muss.
• Fortgeschrittene Funktionen wie Time-Travel-Debugging oder Middleware.

Fazit

Der useActionState-Hook von React bietet eine leistungsstarke und elegante Möglichkeit, Zustandsaktualisierungen zu verwalten, die durch asynchrone Aktionen ausgelöst werden. Durch die Konsolidierung von Lade- und Fehlerzuständen vereinfacht er den Code und verbessert die Lesbarkeit, insbesondere bei der Arbeit mit React Server Components und Server Actions. Das Verständnis seiner Stärken und Grenzen ermöglicht es Ihnen, den richtigen Zustandsmanagement-Ansatz für Ihre Anwendung zu wählen, was zu wartbarerem und effizienterem Code führt.

Indem Sie die in diesem Leitfaden beschriebenen Best Practices befolgen, können Sie useActionState effektiv nutzen, um die Benutzererfahrung und den Entwicklungsworkflow Ihrer Anwendung zu verbessern. Denken Sie daran, die Komplexität Ihrer Anwendung zu berücksichtigen und die Zustandsmanagement-Lösung zu wählen, die am besten zu Ihren Anforderungen passt. Von einfachen Formularübermittlungen bis hin zu komplexen Datenmutationen kann useActionState ein wertvolles Werkzeug in Ihrem React-Entwicklungsarsenal sein.