logo

React Flux-Konzept

Flux ist eine Anwendungsarchitektur, die Facebook intern zum Erstellen der clientseitigen Webanwendung mit React verwendet. Es handelt sich weder um eine Bibliothek noch um ein Framework. Es handelt sich weder um eine Bibliothek noch um ein Framework. Es handelt sich um eine Art Architektur, die React als Ansicht ergänzt und dem Konzept des unidirektionalen Datenflussmodells folgt. Dies ist nützlich, wenn das Projekt über dynamische Daten verfügt und wir die Daten effektiv auf dem neuesten Stand halten müssen. Es reduziert die Laufzeitfehler.

Vererbung Java

Flux-Anwendungen spielen beim Umgang mit Daten drei Hauptaufgaben:

  1. Dispatcher
  2. Shops
  3. Ansichten (Reaktionskomponenten)

Hier sollten Sie nicht mit dem Model-View-Controller (MVC)-Modell verwechselt werden. Obwohl Controller in beiden vorhanden sind, befinden sich Flux-Controller-Ansichten (Ansichten) an der Spitze der Hierarchie. Es ruft Daten aus den Geschäften ab und gibt diese Daten dann an ihre Kinder weiter. Darüber hinaus werden Aktionsersteller – Dispatcher-Hilfsmethoden zur Beschreibung aller Änderungen verwendet, die in der Anwendung möglich sind. Es kann als vierter Teil des Flux-Update-Zyklus nützlich sein.

Struktur und Datenfluss

React Flux-Konzept

In der Flux-Anwendung fließen Daten in eine einzige Richtung (unidirektional). Dieser Datenfluss ist für das Flussmuster von zentraler Bedeutung. Der Dispatcher, die Geschäfte und die Ansichten sind unabhängige Knoten mit Ein- und Ausgängen. Bei den Aktionen handelt es sich um einfache Objekte, die neue Daten und Typeigenschaften enthalten. Schauen wir uns nun nacheinander die verschiedenen Komponenten der Flux-Architektur an.

Dispatcher

Es ist ein zentraler Hub für die React Flux-Anwendung und verwaltet den gesamten Datenfluss Ihrer Flux-Anwendung. Es handelt sich um ein Register der Rückrufe in die Filialen. Es verfügt über keine wirkliche eigene Intelligenz und fungiert lediglich als Mechanismus zur Verteilung der Aktionen an die Geschäfte. Alle Geschäfte registrieren sich selbst und bieten einen Rückruf an. Es ist ein Ort, an dem alle Ereignisse verarbeitet werden, die das Geschäft verändern. Wenn ein Aktionsersteller dem Dispatcher eine neue Aktion bereitstellt, erhalten alle Geschäfte diese Aktion über die Rückrufe in der Registrierung.

Die API des Dispatchers verfügt über fünf Methoden. Diese sind:

Schriftgrößen in Latex
SN Methoden Beschreibungen
1. registrieren() Es wird verwendet, um den Rückruf des Aktionshandlers eines Geschäfts zu registrieren.
2. unregister() Es wird verwendet, um den Rückruf eines Shops abzumelden.
3. warten auf() Es wird verwendet, um darauf zu warten, dass der angegebene Rückruf zuerst ausgeführt wird.
4. versenden() Es wird verwendet, um eine Aktion auszulösen.
5. isDispatching() Es wird verwendet, um zu prüfen, ob der Dispatcher gerade eine Aktion auslöst.

Shops

Es enthält hauptsächlich den Anwendungsstatus und die Logik. Es ähnelt dem Modell in einem herkömmlichen MVC. Es dient zur Aufrechterhaltung eines bestimmten Status innerhalb der Anwendung, aktualisiert sich als Reaktion auf eine Aktion und gibt das Änderungsereignis aus, um die Controller-Ansicht zu benachrichtigen.

Ansichten

Es wird auch als Controller-Ansicht bezeichnet. Es befindet sich an der Spitze der Kette und speichert die Logik zum Generieren von Aktionen und zum Empfangen neuer Daten aus dem Speicher. Es handelt sich um eine React-Komponente, die auf Änderungsereignisse hört, die Daten aus den Stores empfängt und die Anwendung erneut rendert.

Aktionen

Mit der Dispatcher-Methode können wir einen Versand an den Shop auslösen und eine Nutzlast an Daten einschließen, die wir als Aktion bezeichnen. Es handelt sich um eine Aktionsersteller- oder Hilfsmethode, die die Daten an den Dispatcher weitergibt.

r in C-Sprache

Vorteil von Flux

  • Es handelt sich um ein unidirektionales Datenflussmodell, das leicht zu verstehen ist.
  • Es ist Open Source und eher ein Entwurfsmuster als ein formales Framework wie die MVC-Architektur.
  • Die Anwendung des Flussmittels ist einfacher zu pflegen.
  • Die Flussmittelauftragsteile sind entkoppelt.