© 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 Eleme...

Neugierig geworden?

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