13. September 2025Deutsch

Erkunden Sie Reacts useActionState mit Zustandsautomaten, um robuste und vorhersagbare Benutzeroberflächen zu erstellen. Lernen Sie die Logik von Aktionszustandsübergängen für komplexe Anwendungen.

React useActionState State Machine: Logik für Aktionszustandsübergänge meistern

Reacts useActionState ist ein leistungsstarker Hook, der in React 19 eingeführt wurde (derzeit als Canary-Version verfügbar) und darauf ausgelegt ist, asynchrone Zustandsaktualisierungen zu vereinfachen, insbesondere im Umgang mit Server-Aktionen. In Kombination mit einem Zustandsautomaten bietet er eine elegante und robuste Methode zur Verwaltung komplexer UI-Interaktionen und Zustandsübergänge. Dieser Blogbeitrag wird darauf eingehen, wie man useActionState effektiv mit einem Zustandsautomaten nutzt, um vorhersagbare und wartbare React-Anwendungen zu erstellen.

Was ist ein Zustandsautomat?

Ein Zustandsautomat ist ein mathematisches Berechnungsmodell, das das Verhalten eines Systems durch eine endliche Anzahl von Zuständen und Übergängen zwischen diesen Zuständen beschreibt. Jeder Zustand repräsentiert eine bestimmte Bedingung des Systems, und Übergänge stellen die Ereignisse dar, die das System veranlassen, von einem Zustand in einen anderen zu wechseln. Stellen Sie es sich wie ein Flussdiagramm vor, jedoch mit strengeren Regeln, wie man sich zwischen den Schritten bewegen kann.

Die Verwendung eines Zustandsautomaten in Ihrer React-Anwendung bietet mehrere Vorteile:

Vorhersagbarkeit: Zustandsautomaten erzwingen einen klaren und vorhersagbaren Kontrollfluss, was es einfacher macht, das Verhalten Ihrer Anwendung nachzuvollziehen.
Wartbarkeit: Durch die Trennung der Zustandslogik vom UI-Rendering verbessern Zustandsautomaten die Code-Organisation und erleichtern die Wartung und Aktualisierung Ihrer Anwendung.
Testbarkeit: Zustandsautomaten sind von Natur aus testbar, da Sie das erwartete Verhalten für jeden Zustand und Übergang leicht definieren können.
Visuelle Darstellung: Zustandsautomaten können visuell dargestellt werden, was bei der Kommunikation des Anwendungsverhaltens mit anderen Entwicklern oder Stakeholdern hilft.

Einführung in `useActionState`

Der useActionState-Hook ermöglicht es Ihnen, das Ergebnis einer Aktion zu behandeln, die potenziell den Anwendungszustand ändert. Er ist für die nahtlose Zusammenarbeit mit Server-Aktionen konzipiert, kann aber auch für clientseitige Aktionen angepasst werden. Er bietet eine saubere Möglichkeit, Ladezustände, Fehler und das Endergebnis einer Aktion zu verwalten, was den Aufbau reaktionsschneller und benutzerfreundlicher UIs erleichtert.

Hier ist ein grundlegendes Beispiel für die Verwendung von useActionState:


const [state, dispatch] = useActionState(async (prevState, formData) => {
  // Ihre Aktionslogik hier
  try {
    const result = await someAsyncFunction(formData);
    return { ...prevState, data: result };
  } catch (error) {
    return { ...prevState, error: error.message };
  }
}, { data: null, error: null });

In diesem Beispiel:

Das erste Argument ist eine asynchrone Funktion, die die Aktion ausführt. Sie erhält den vorherigen Zustand und Formulardaten (falls zutreffend).
Das zweite Argument ist der Anfangszustand.
Der Hook gibt ein Array zurück, das den aktuellen Zustand und eine Dispatch-Funktion enthält.

Kombination von `useActionState` und Zustandsautomaten

Die wahre Stärke liegt in der Kombination von useActionState mit einem Zustandsautomaten. Dies ermöglicht es Ihnen, komplexe Zustandsübergänge zu definieren, die durch asynchrone Aktionen ausgelöst werden. Betrachten wir ein Szenario: eine einfache E-Commerce-Komponente, die Produktdetails abruft.

Beispiel: Abrufen von Produktdetails

Wir definieren die folgenden Zustände für unsere Produktdetail-Komponente:

Leerlauf (Idle): Der Ausgangszustand. Es wurden noch keine Produktdetails abgerufen.
Laden (Loading): Der Zustand, während die Produktdetails abgerufen werden.
Erfolg (Success): Der Zustand, nachdem die Produktdetails erfolgreich abgerufen wurden.
Fehler (Error): Der Zustand, wenn beim Abrufen der Produktdetails ein Fehler aufgetreten ist.

Wir können diesen Zustandsautomaten mit einem Objekt darstellen:


const produktdetailAutomat = {
  initial: 'leerlauf',
  states: {
    leerlauf: {
      on: {
        ABRUFEN: 'laden',
      },
    },
    laden: {
      on: {
        ERFOLG: 'erfolg',
        FEHLER: 'fehler',
      },
    },
    erfolg: {
      type: 'final',
    },
    fehler: {
      on: {
        ABRUFEN: 'laden',
      },
    },
  },
};

Dies ist eine vereinfachte Darstellung; Bibliotheken wie XState bieten anspruchsvollere Implementierungen von Zustandsautomaten mit Funktionen wie hierarchischen Zuständen, parallelen Zuständen und Guards.

React-Implementierung

Nun integrieren wir diesen Zustandsautomaten mit useActionState in eine React-Komponente.


import React from 'react';
// Installieren Sie XState, wenn Sie die volle Zustandsautomaten-Erfahrung möchten. Für dieses einfache Beispiel verwenden wir ein einfaches Objekt.
// import { createMachine, useMachine } from 'xstate';

const produktdetailAutomat = {
  initial: 'leerlauf',
  states: {
    leerlauf: {
      on: {
        ABRUFEN: 'laden',
      },
    },
    laden: {
      on: {
        ERFOLG: 'erfolg',
        FEHLER: 'fehler',
      },
    },
    erfolg: {
      type: 'final',
    },
    fehler: {
      on: {
        ABRUFEN: 'laden',
      },
    },
  },
};


function Produktdetails({ produktId }) {
  const [zustand, dispatch] = React.useReducer(
    (zustand, ereignis) => {
      const naechsterZustand = produktdetailAutomat.states[zustand].on[ereignis];
      return naechsterZustand || zustand; // Gibt den nächsten Zustand zurück oder den aktuellen, wenn kein Übergang definiert ist
    },
    produktdetailAutomat.initial
  );


  const [produktdaten, setProduktdaten] = React.useState(null);
  const [fehler, setFehler] = React.useState(null);

  React.useEffect(() => {
    if (zustand === 'laden') {
      const datenAbrufen = async () => {
        try {
          const antwort = await fetch(`https://api.example.com/products/${produktId}`); // Ersetzen Sie dies durch Ihren API-Endpunkt
          if (!antwort.ok) {
            throw new Error(`HTTP-Fehler! Status: ${antwort.status}`);
          }
          const daten = await antwort.json();
          setProduktdaten(daten);
          setFehler(null);
          dispatch('ERFOLG');
        } catch (e) {
          setFehler(e.message);
          setProduktdaten(null);
          dispatch('FEHLER');
        }
      };
      datenAbrufen();
    }
  }, [zustand, produktId, dispatch]);

  const handleAbrufen = () => {
    dispatch('ABRUFEN');
  };

  return (
    
      Produktdetails
      {zustand === 'leerlauf' && }
      {zustand === 'laden' && Wird geladen...}
      {zustand === 'erfolg' && (
        
          {produktdaten.name}
          {produktdaten.description}
          Preis: ${produktdaten.price}
        
      )}
      {zustand === 'fehler' && Fehler: {fehler}}
    
  );
}

export default Produktdetails;

Erklärung:

Wir definieren produktdetailAutomat als einfaches JavaScript-Objekt, das unseren Zustandsautomaten darstellt.
Wir verwenden React.useReducer, um die Zustandsübergänge basierend auf unserem Automaten zu verwalten.
Wir verwenden Reacts useEffect-Hook, um den Datenabruf auszulösen, wenn der Zustand 'laden' ist.
Die handleAbrufen-Funktion löst das 'ABRUFEN'-Ereignis aus und initiiert den Ladezustand.
Die Komponente rendert je nach aktuellem Zustand unterschiedliche Inhalte.

Verwendung von `useActionState` (Hypothetisch – React 19 Feature)

Obwohl useActionState noch nicht vollständig verfügbar ist, würde die Implementierung, sobald sie verfügbar ist, so aussehen und einen saubereren Ansatz bieten:


import React from 'react';
//import { useActionState } from 'react'; // Auskommentierung aufheben, wenn verfügbar

const produktdetailAutomat = {
  initial: 'leerlauf',
  states: {
    leerlauf: {
      on: {
        ABRUFEN: 'laden',
      },
    },
    laden: {
      on: {
        ERFOLG: 'erfolg',
        FEHLER: 'fehler',
      },
    },
    erfolg: {
      type: 'final',
    },
    fehler: {
      on: {
        ABRUFEN: 'laden',
      },
    },
  },
};

function Produktdetails({ produktId }) {
  const anfangszustand = { state: produktdetailAutomat.initial, data: null, error: null };

  // Hypothetische useActionState-Implementierung
  const [neuerZustand, dispatch] = React.useReducer(
    (state, event) => {
      const naechsterZustand = produktdetailAutomat.states[state.state].on[event];
      return naechsterZustand ? { ...state, state: naechsterZustand } : state; // Gibt den nächsten Zustand zurück oder den aktuellen, wenn kein Übergang definiert ist
    },
    anfangszustand
  );

  const handleProduktAbrufen = async () => {
    dispatch('ABRUFEN');

      try {
        const antwort = await fetch(`https://api.example.com/products/${produktId}`); // Ersetzen Sie dies durch Ihren API-Endpunkt
        if (!antwort.ok) {
          throw new Error(`HTTP-Fehler! Status: ${antwort.status}`);
        }
        const daten = await antwort.json();

        // Erfolgreich abgerufen - ERFOLG mit den Daten auslösen!
        dispatch('ERFOLG');

       // Abgerufene Daten im lokalen Zustand speichern. Dispatch kann nicht innerhalb des Reducers verwendet werden.
       neuerZustand.data = daten; // Außerhalb des Dispatchers aktualisieren

      } catch (fehler) {
        // Fehler aufgetreten - FEHLER mit der Fehlermeldung auslösen!
        dispatch('FEHLER');

         // Den Fehler in einer neuen Variable speichern, um ihn in render() anzuzeigen
         neuerZustand.error = fehler.message;
      }
    //}, anfangszustand);
  };

  return (
    
      Produktdetails
      {neuerZustand.state === 'leerlauf' && }
      {neuerZustand.state === 'laden' && Wird geladen...}
      {neuerZustand.state === 'erfolg' && neuerZustand.data && (
        
          {neuerZustand.data.name}
          {neuerZustand.data.description}
          Preis: ${neuerZustand.data.price}
        
      )}
      {neuerZustand.state === 'fehler' && neuerZustand.error && Fehler: {neuerZustand.error}}
    
  );
}

export default Produktdetails;

Wichtiger Hinweis: Dieses Beispiel ist hypothetisch, da useActionState noch nicht vollständig verfügbar ist und sich seine genaue API ändern könnte. Ich habe es durch den Standard-useReducer für die Kernlogik ersetzt, damit es lauffähig ist. Die Absicht ist jedoch zu zeigen, wie Sie es verwenden *würden*, sollte es verfügbar werden, und Sie müssten useReducer durch useActionState ersetzen. In Zukunft mit useActionState sollte dieser Code mit minimalen Änderungen wie erklärt funktionieren und die asynchrone Datenverarbeitung erheblich vereinfachen.

Vorteile der Verwendung von `useActionState` mit Zustandsautomaten

Klare Trennung der Belange: Die Zustandslogik ist innerhalb des Zustandsautomaten gekapselt, während das UI-Rendering von der React-Komponente gehandhabt wird.
Verbesserte Lesbarkeit des Codes: Der Zustandsautomat bietet eine visuelle Darstellung des Anwendungsverhaltens, was das Verständnis und die Wartung erleichtert.
Vereinfachte asynchrone Handhabung: useActionState rationalisiert die Behandlung asynchroner Aktionen und reduziert Boilerplate-Code.
Verbesserte Testbarkeit: Zustandsautomaten sind von Natur aus testbar, was es Ihnen ermöglicht, die Korrektheit des Verhaltens Ihrer Anwendung leicht zu überprüfen.

Fortgeschrittene Konzepte und Überlegungen

XState-Integration

Für komplexere Anforderungen an die Zustandsverwaltung sollten Sie eine dedizierte Zustandsautomaten-Bibliothek wie XState in Betracht ziehen. XState bietet ein leistungsstarkes und flexibles Framework zur Definition und Verwaltung von Zustandsautomaten mit Funktionen wie hierarchischen Zuständen, parallelen Zuständen, Guards und Aktionen.


// Beispiel mit XState
import { createMachine, useMachine } from 'xstate';

const productDetailsMachine = createMachine({
  id: 'productDetails',
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      invoke: {
        id: 'fetchProduct',
        src: (context, event) => fetch(`https://api.example.com/products/${context.productId}`).then(res => res.json()),
        onDone: {
          target: 'success',
          actions: assign({ product: (context, event) => event.data })
        },
        onError: {
          target: 'error',
          actions: assign({ error: (context, event) => event.data })
        }
      }
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
}, {
  services: {
    fetchProduct: (context, event) => fetch(`https://api.example.com/products/${context.productId}`).then(res => res.json())
  }
});

Dies bietet eine deklarativere und robustere Methode zur Zustandsverwaltung. Stellen Sie sicher, dass Sie es mit npm install xstate installieren.

Globales Zustandsmanagement

Für Anwendungen mit komplexen Anforderungen an die Zustandsverwaltung über mehrere Komponenten hinweg sollten Sie eine globale Zustandsmanagement-Lösung wie Redux oder Zustand in Verbindung mit Zustandsautomaten in Betracht ziehen. Dies ermöglicht es Ihnen, den Zustand Ihrer Anwendung zu zentralisieren und einfach zwischen Komponenten zu teilen.

Testen von Zustandsautomaten

Das Testen von Zustandsautomaten ist entscheidend, um die Korrektheit und Zuverlässigkeit Ihrer Anwendung zu gewährleisten. Sie können Test-Frameworks wie Jest oder Mocha verwenden, um Unit-Tests für Ihre Zustandsautomaten zu schreiben und zu überprüfen, ob sie wie erwartet zwischen den Zuständen wechseln und verschiedene Ereignisse korrekt behandeln.

Hier ist ein einfaches Beispiel:


// Beispiel Jest-Test
import { interpret } from 'xstate';
import { productDetailsMachine } from './productDetailsMachine';

describe('productDetailsMachine', () => {
  it('sollte vom Zustand idle zu loading übergehen bei einem FETCH-Ereignis', (done) => {
    const service = interpret(productDetailsMachine).onTransition((state) => {
      if (state.value === 'loading') {
        expect(state.value).toBe('loading');
        done();
      }
    });

    service.start();
    service.send('FETCH');
  });
});

Internationalisierung (i18n)

Beim Erstellen von Anwendungen für ein globales Publikum ist die Internationalisierung (i18n) unerlässlich. Stellen Sie sicher, dass Ihre Zustandsautomatenlogik und das UI-Rendering ordnungsgemäß internationalisiert sind, um mehrere Sprachen und kulturelle Kontexte zu unterstützen. Berücksichtigen Sie Folgendes:

Textinhalte: Verwenden Sie i18n-Bibliotheken, um Textinhalte basierend auf der Ländereinstellung des Benutzers zu übersetzen.
Datums- und Zeitformate: Verwenden Sie sprachspezifische Datums- und Zeitformatierungsbibliotheken, um Daten und Zeiten im richtigen Format für die Region des Benutzers anzuzeigen.
Währungsformate: Verwenden Sie sprachspezifische Währungsformatierungsbibliotheken, um Währungswerte im richtigen Format für die Region des Benutzers anzuzeigen.
Zahlenformate: Verwenden Sie sprachspezifische Zahlenformatierungsbibliotheken, um Zahlen im richtigen Format für die Region des Benutzers anzuzeigen (z. B. Dezimaltrennzeichen, Tausendertrennzeichen).
Rechts-nach-Links (RTL) Layout: Unterstützen Sie RTL-Layouts für Sprachen wie Arabisch und Hebräisch.

Indem Sie diese i18n-Aspekte berücksichtigen, können Sie sicherstellen, dass Ihre Anwendung für ein globales Publikum zugänglich und benutzerfreundlich ist.

Fazit

Die Kombination von Reacts useActionState mit Zustandsautomaten bietet einen leistungsstarken Ansatz zum Erstellen robuster und vorhersagbarer Benutzeroberflächen. Durch die Trennung der Zustandslogik vom UI-Rendering und die Erzwingung eines klaren Kontrollflusses verbessern Zustandsautomaten die Code-Organisation, Wartbarkeit und Testbarkeit. Obwohl useActionState noch ein kommendes Feature ist, wird das Verständnis, wie man Zustandsautomaten jetzt integriert, Sie darauf vorbereiten, seine Vorteile zu nutzen, wenn es verfügbar wird. Bibliotheken wie XState bieten noch fortschrittlichere Zustandsverwaltungsfunktionen, die es einfacher machen, komplexe Anwendungslogik zu handhaben.

Indem Sie Zustandsautomaten und useActionState annehmen, können Sie Ihre React-Entwicklungsfähigkeiten verbessern und Anwendungen erstellen, die zuverlässiger, wartbarer und benutzerfreundlicher für Benutzer auf der ganzen Welt sind.

React useActionState State Machine: Logik für Aktionszustandsübergänge meistern

Was ist ein Zustandsautomat?

Einführung in useActionState

Kombination von useActionState und Zustandsautomaten