© ProStockStudio/Shutterstock.com
Teil 2: Redux - State-Management für React

Redux im Überblick


Eine der am weitesten verbreiteten Implementierungen der Flux-Architektur ist die Bibliothek Redux. In diesem Artikel stelle ich Ihnen die Prinzipien der Architektur von Redux und die konkrete Einbindung der Bibliothek in eine React-Anwendung vor.

React ist eine Bibliothek, die sich um einen bestimmten Zweck kümmert: Benutzerschnittstellen bauen. Die Applikation wird in einen Baum von Komponenten zerlegt, in dem die Informationen über Props von der Wurzel des Baums in die Kindkomponenten hinaufgereicht werden. Über Callback-Funktionen können Informationen im Baum in Richtung der Wurzelkomponente zurückgegeben werden. Dieser gerichtete Datenfluss macht die Vorgänge in der Applikation besser vorhersehbar und ermöglicht Performanceverbesserungen.

Mit React alleine lassen sich schon viele Applikationen umsetzen, wird der Umfang jedoch größer, wird die Modellierung des Datenflusses zunehmend aufwendiger. Das liegt vor allem daran, dass der Komponentenbaum immer tiefer wird und die anzuzeigenden Daten durch zahlreiche Komponenten gereicht werden müssen, bis sie schließlich angezeigt werden. Facebook entwickelte zur Lösung dieser Probleme die Flux-Architektur. Dabei handelt es sich weniger um eine konkrete Bibliothek, sondern um ein Architekturmuster, das zur State-Verwaltung in einer React-Applikation verwendet werden kann.

Application State

Als State einer Applikation werden alle dynamischen Informationen bezeichnet. Der State kann sowohl vom Benutzer durch Interaktion als auch vom Server beeinflusst werden. Auch die Applikation selbst kann beispielsweise durch zeitgesteuerte Aktionen den State verändern. Meist wird zwischen dem eigentlichen State und dem UI State einer Applikation unterschieden. Ersterer beinhaltet die Applikationsdaten wie beispielsweise ein Array von Datensätzen, das von der Applikation angezeigt werden soll. Der UI State enthält Informationen, die für die Anzeige relevant sind, wie beispielsweise aktive Filter, Sortierungen oder ob bestimmte Elemente ausgeblendet werden.

Die Flux-Architektur

Seit der Vorstellung der Flux-Architektur wurden zahlreiche Bibliotheken implementiert, die Ihnen helfen, diese Architektur in Ihrer Applikation umzusetzen. Viele dieser Projekte werden mittlerweile jedoch nicht mehr weiterentwickelt, sodass sich die Auswahl auf einige wenige beschränkt. Allen gemein ist die Grundidee von Flux, dazu kommen meist zusätzliche Verbesserungen. Abbildung 1 zeigt Ihnen die Bestandteile von Flux und ihr Zusammenspiel.

springer_redux_1.tif_fmt1.jpgAbb. 1: Flux-Aufbau [1]

Die Flux-Architektur sieht vor, dass der State der Applikation in Stores abgelegt wird. Die Besonderheit dieser Datencontainer besteht darin, dass Sie aus ihnen nur lesen können. Schreibende Zugriffe auf Stores sind nur über den Umweg mit Actions und Dispatchern möglich. Eine Action ist die Objektrepräsentation einer Änderung des Application States. Diese Action wird an den Dispatcher übergeben. Der Dispatcher sorgt dafür, dass die Änderungen an den entsprechenden Stores vorgenommen werden. Die Stores wiederum dienen als Datenlieferanten für die Views. Sobald sich die Informationen eines Stores ändern, wird auch die Darstellung entsprechend angepasst.

Redux

Redux setzt auf den Prinzipien von Flux auf, um schnell, leichtgewichtig und nachvollziehbar den State einer Applikation zu verwalten. Bei Redux handelt es sich um eine Bibliothek, die unabhängig von einem bestimmten JavaScript-Framework verwendet werden kann. Sie werden jedoch häufig eine Kombination mit React antreffen. Aber auch der Einsatz in einer Umgebung mit Angular hat sich schon häufig bewährt.

Bevor Sie Redux in Ihrer Applikation einsetzen, sollten Sie sich zunächst die Frage stellen, ob Sie das Werkzeug wirklich brauchen. Das Einfügen zusätzlicher Bibliotheken bedeutet in den meisten Fällen zusätzliche Komplexität und Abstraktion. Das gilt auch im Fall von Redux. Bei kleineren Applikationen ist es häufig auch ausreichend, wenn Sie den lokalen State von React verwenden und, wie eingangs beschrieben, den vorgesehenen gerichteten Datenfluss einsetzen. Sobald Sie jedoch feststellen, dass Sie diesen lokalen State durch mehrere Ebenen reichen, kann das ein erstes Anzeichen für einen State-Container wie Redux sein.

Unterschiede zwischen Flux und Redux

Zunächst stellt sich natürlich die Frage, warum Sie nicht direkt Flux zur State-Verwaltung verwenden und stattdessen Redux einsetzen. Grundsätzlich sind die Unterschiede zwischen Redux und Flux nicht groß. Beide teilen sich dieselben Prinzipien. Redux vereinfacht die State-Verwaltung allerdings an einigen Stellen und lässt sich dabei von den Prinzipien von Elm inspirieren. Für eine verbesserte Lesbarkeit, Wartbarkeit und Testbarkeit des Quellcodes kommen bei Redux Pure Functions und einfache Objekte zum Einsatz. Außerdem setzt Redux auf nur einen Store zur Speicherung des Application States statt auf mehrere kleinere Stores. Die Verwendung von Actions als Repräsentation von Änderungen am Application State macht es möglich, eine Art von Event-Sourcing zu betreiben und den Zustand der Applikation aus der Abfolge der vergangenen Actions wiederherzustellen. Wo die Möglichkeiten von Flux an dieser Stelle recht schnell ausgeschöpft sind, geht Redux noch einen Schritt weiter und bietet ein Undo und Redo der Aktionen. Insgesamt ist Redux eine sehr leichtgewichtige Bibliothek. Der Autor von Redux, Dan Abramov, hat zu Demonstrationszwecken alle Plausibilitätsprüfungen und Kommentare entfernt und den gesamten Quellcode in einer Datei zusammengefügt. Für eine funktionsfähige Implementierung kommt er mit 99 Zeilen aus.

Die drei Prinzipien von Redux

Redux lässt sich auf drei Prinzipien reduzieren, auf denen sowohl die Bibliothek als auch die Architektur einer Applikation aufbaut:

  • Single Source of Truth: In einer Redux-Applikation gibt es, wie erwähnt, lediglich einen Store. Dieser enthält alle Informationen zum State der Applikation. Dieser Aufbau sorgt dafür, dass das Debugging einer Applikation einfacher wird, und auch die initiale Befüllung der Applikation ist in einer Aktion möglich.

  • State is read-only: Auf den Store kann aus der Applikation grundsätzlich nur lesend zugegriffen werden. Änderungen erfolgen immer über Actions, die auf dem Store dispatcht und vom Reducer verarbeitet werden. Damit wird sichergestellt, dass sämtliche Änderungen den gleichen Weg durch die Applikation nehmen.

  • Änderungen werden durch Pure Functions durchgeführt: Die Reducer bestimmen, wie die dispatchten Actions den State der Applikation verändern. Diese Reducer werden als Pure Functions umgesetzt. Sie erhalten also eine Eingabe und produzieren daraus eine Ausgabe und sind frei von Seiteneffekten. Damit sind Reducer sehr gut und einfach testbar.

Auf diesen drei Prinzipien bauen die einzelnen Bestandteile von Redux auf. Das sind allen voran der Store, die Actions und der Reducer. Diese Elemente und ihre Besonderheiten werde ich Ihnen im Folgenden vorstellen.

Die Elemente einer Redux-Applikation

Durch die Einfachheit seiner Architektur fällt der Einstieg in Redux recht leicht. Haben Sie die Konzepte einmal verstanden, können Sie die Bibliothek mit wenig Aufwand in Ihre Applikation integrieren.

Der Store – das Herzstück Ihrer Applikation

Der State Ihrer Applikation wird als einfache Array- und Objektstruktur im Store gespeichert. Zur Erstellung des Stores stellt Redux die createStore-Funktion zur Verfügung. Sie akzeptiert drei Argumente: die Reducer-Funktion, einen initialen State und eine Enhancer-Funktion, mit der Sie die Fu...

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