© Shutterstock / Graphic farm
Lösungen für das React State Management im Vergleich

Eine Frage des Zustands


Sollte ich meinen State mit dem Context API und State Hooks oder Redux managen? Diese Frage stellen sich viele Entwickler, die mit React arbeiten. Die richtige Antwort hängt stark von der jeweiligen Anwendung ab: Manchmal reicht das Context API nicht, während Redux für andere Fälle zu komplex ist. Woher weiß man aber, was wozu passt?

Wenn man sich in der JavaScript-Community umschaut, dann stößt man immer wieder auf folgende Fragestellung: Wie manage ich meinen State in React? [1] Insbesondere Entwickler, die vorher mit anderen Frameworks wie Angular oder Vue gearbeitet haben, sind sich hier unsicher und fragen häufig nach einer offiziellen Lösung für das State Management [2]. Seit der Einführung des Context API und des Hooks API in React 16.8 wird ebenfalls oft gefragt, ob man Redux oder das Context API mit useState/useReducer verwenden sollte, um den globalen State zu managen [3]. Beide Fragen möchte ich im Folgenden beantworten.

Was ist State Management?

Bevor man die Frage nach dem richtigen State Management beantworten kann, benötigen wir eine Definition, was denn genau State Management bedeutet. Der State oder zu deutsch Status beschreibt den Zustand einer Anwendung zu einem gegebenen Zeitpunkt. Unterarten des States sind: Server State, Navigation State, lokaler UI State und globaler UI State.

Dementsprechend beschreibt der Begriff State Management die Pflege des Zustands oder Wissens einer Anwendung in Abhängigkeit aller Inputs [4]. Inputs finden in der Regel auf dem Server (API) oder dem Client (User) statt. Die Schwierigkeit des State Managements ergibt sich aus der Koordination aller Unterarten des States einer Anwendung.

Was bedeutet State in React?

Das UI ist die optische Wiedergabe des States einer Anwendung zu einem gegebenen Zeitpunkt [5]. Daraus folgt: In React ist der State eine Datenstruktur, die den aktuellen Zustand des UI widerspiegelt. Der State kann dabei aus verschiedenartigen Daten bestehen:

  1. ein Boolean, das entscheidet, ob eine Sidebar geöffnet ist oder nicht

  2. der Textinhalt eines Formulars

  3. Serverdaten, die über ein API bezogen wurden

In JavaScript können wir diese drei Fälle wie in Listing 1 gezeigt darstellen. Alle diese Daten könnten entweder lokal (d. h. innerhalb einer Komponente mit React Hooks oder setState) oder global gemanagt werden. Managen bezeichnet hier das Speichern und Verändern des Status sowie die Darstellung des Status durch das UI.

Listing 1

// 1) let isOpen = false; // 2) let addressForm = { first: "Donald", last: "Duck", street: "Webfoot Walk", no: "1313", town: "Duckburg", state: "Calisto", }; // 3) const issues = [ { "url": "https://api.github.com/repos/rockiger/metado/issues/47", "number": 47, "title": "Look into warnings from react beautiful dnd", "body": "", ... }, ... { "url": "https://api.github.com/repos/rockiger/metado/issues/46", "number": 46, "title": "Create Testsystem for metado", "body": "- [ ] https://firebase.google.com/docs/emulator-suite\n", ... }, ]

State-Management-Lösungen in React

Gibt es eine offizielle oder empfohlene State-Management-Lösung für React wie bei anderen Frameworks? Ja und nein. Es gibt mit der setState-Methode und den useState/useReducer Hooks eine React-eigene Lösung für das lokale State Management innerhalb einer Komponente. Damit kann man schon einigermaßen komplexe Apps erstellen [6]. Eine quasioffizielle Lösung für das globale State Management, wie NgRx für Angular oder Vuex für Vue, gibt es nicht. Hier hat man bei React die Qual der Wahl. Manche Lösungen sind auf bestimmte Teilbereiche des Application State spezialisiert (z. B. react-query [7]), manche sind allgemeine Lösungen (z. B. Redux [8]).

Die passende Lösung finden

Jede React-Anwendung, die mehr als zwei Ansichten hat, sollte für den Navigation State auf eine Routing-Bibliothek wie react-router [9] setzen. Das Handling des Browser-API ist aus meiner Sicht viel zu aufwendig, um es selbst zu managen, sodass ich hier nicht weiter darauf eingehen werde.

Wenn wir davon ausgehen, dass die Hauptschwierigkeit die Koordination der Unterarten ist, dann sollten wir uns als Erstes fragen: Welche Arten von State müssen wir in unserer (React-)Anwendung verwalten? Wie komplex ist mein State? Wie oft ändert er sich? Auf dieser Basis fällt man dann die Entscheidung, welche Lösung die beste ist. Abbildung 1 zeigt ein Diagramm meines Entscheidungsprozesses.

laspe_react_state_1.tif_fmt1.jpgAbb. 1: Entscheidungsprozess zur Auswahl des State Management

useSta...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang