React: Flux trennt Anwendungslogik von der Benutzeroberfläche

Ein Praxisbeitrag zu React beschreibt am 2. Oktober 2015 das Flux-Muster für Webanwendungen. React-Komponenten sollen dabei vor allem die Benutzeroberfläche abbilden, während Anwendungslogik in getrennten Stores organisiert wird.

React gibt Daten grundsätzlich in eine Richtung weiter, vom übergeordneten Parent zu seinen Child-Komponenten. Für Ereignisse wie einen Klick wird die benötigte Information wieder an die übergeordnete Komponente zurückgegeben. Das Beispiel des Beitrags lädt nach einem Klick auf einen Button die Profilseite eines Tweets neben einer Liste.

Stores, Actions und Dispatcher

Flux teilt den Ablauf in Actions, einen zentralen Dispatcher und Stores auf. Eine Action beschreibt das Ereignis, der Dispatcher verteilt es an die zuständigen Stores. Diese verwalten den Anwendungszustand und geben ihn anschließend an die React-Komponenten weiter. Die Oberfläche bleibt damit von den Datenquellen getrennt.

Das Muster ist besonders für Anwendungen mit vielen interaktiven Zuständen interessant. Es ergänzt React um eine feste Datenflussstruktur, ohne die Komponenten mit immer mehr Geschäftslogik zu belasten. Ein älterer Beitrag zur Nuclide-IDE für Hack, Flow und React hatte bereits die Werkzeuge rund um React beleuchtet.

Weitere News

Weitere News

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein