© BAIVECTOR/Shutterstock.com
Globales State Management mit React, Redux, MobX und dem Context API

Alles im Datenfluss!


React ist eine JavaScript-Bibliothek aus dem Hause Facebook, die sich zunehmender Beliebtheit unter Frontend-Entwicklern erfreut. Diese Beliebtheit führt u. a. dazu, dass Webanwendungen mittlerweile den Stellenwert und die Funktionsvielfalt von Desktopanwendungen besitzen. Immer komplexere Zustandsautomaten bescheren manchen Webentwicklern jedoch schlaflose Nächte. Grund genug, sich React einmal näher anzuschauen.

Im Jahr 2014 stand Facebook mit der technischen Architektur seines sozialen Netzwerks an einem Scheidepunkt. Manche Nutzer waren unzufrieden, denn sie bekamen Benachrichtigungen über eingehende Chatnachrichten angezeigt, obwohl keine neuen Nachrichten vorhanden waren. Die hohe technische und organisatorische Komplexität bei Facebook brachte das gängige Model-View-Controller-(MVC-)Pattern an seine Grenzen. Eine hohe Anzahl von Models kommuniziert mit unzähligen Views, teilweise kreuz und quer und zu guter Letzt noch bidirektional. Das Ganze endete darin, dass sich manche Facebook-Entwickler an bestimmte Codestellen nicht mehr herantrauten in der Angst, einen Fehler in einem völlig anderen Modul hervorzurufen. Eine Lösung musste her, und so schufen die Softwareingenieure von Facebook das Flux-Muster.

Flux

Flux [1] ist keine Software, sondern beschreibt eine Funktionsweise und unterscheidet sich fundamental zum Model View Controller, dem bisherigen Platzhirsch der Softwarearchitekturmuster. Im Gegensatz zu MVC fließen die Daten bei Flux stets nur in eine Richtung. Im Wesentlichen spielen vier Komponenten eine Rolle: Actions, Dispatcher, der Store und die View (Abb. 1).

beuermann_react_1.tif_fmt1.jpgAbb. 1: Die Flux-Architektur

Der Dispatcher ist die zentrale Einheit, die alle Datenflüsse in einer Flux-Anwendung verteilt. Jeder Store registriert sich beim Dispatcher und übergibt eine Callback-Funktion. Reagiert der Dispatcher auf eine Action, verteilt er deren Daten über die Callbacks an alle Stores, die bei ihm registriert sind. Je komplexer eine Applikation wird, desto wichtiger wird die Rolle des Dispatchers. Sind mehrere Stores vorhanden, kann der Dispatcher die Callbacks in einer vordefinierten Reihenfolge aufrufen. Stores enthalten Zustand und Geschäftslogik der Webapplikation. Sie entsprechen ungefähr der Rolle der Models aus dem MVC. Im Gegensatz zum Model, das im Idealfall nur Daten eines Objekts verwaltet, verwalten die Stores unter Umständen die gesamten Daten der Anwendung.

Mit dieser eher theoretischen Vorstellung über das Flux-Muster trauen wir uns nun an die beli...

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