Sebastian Springer MaibornWolff

React und Redux sind zwei sehr spezialisierte Bibliotheken, die sich hervorragend ergänzen

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.

Artikelserie

  • Teil 1: React – ein Blick unter die Haube
  • Teil 2: Redux – State-Management für React
  • Teil 3: Flow – Typsicherheit auf React-Art
  • Teil 4: React Native – native Applikationen mit React und Redux entwickeln
  • Teil 5: React testen – gute und stablie Applikationen entwickeln

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.

Abb. 1: Flux-Aufbau

Abb. 1: Flux-Aufbau

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.

Den vollständigen Artikel lesen Sie in der Ausgabe:

PHP Magazin 1.18 - "Alexa Skills"

Alle Infos zum Heft
579818056Redux – State-Management für React
X
- Gib Deinen Standort ein -
- or -