React
ReactJS auf Flux-Weise verwenden

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript
Suche…


Einführung

Es ist sehr praktisch, den Flux-Ansatz zu verwenden, wenn Ihre Anwendung mit ReactJS am Frontend aufgrund von begrenzten Strukturen und ein wenig neuem Code erweitert werden soll, um Statusänderungen in der Laufzeit zu erleichtern.

Bemerkungen

Flux ist die Anwendungsarchitektur, die Facebook verwendet, um clientseitige Webanwendungen zu erstellen. Es ergänzt die komponierbaren Ansichtskomponenten von React, indem ein unidirektionaler Datenfluss verwendet wird. Es ist eher ein Muster als ein formaler Rahmen, und Sie können Flux sofort ohne viel neuen Code verwenden.

Flussanwendungen bestehen aus drei Hauptteilen: dem Dispatcher , den Filialen und den Ansichten (React-Komponenten). Diese sollten nicht mit Model-View-Controller verwechselt werden. Controller sind zwar in einer Flux-Anwendung vorhanden, aber es handelt sich um Controller-Ansichten. Ansichten, die sich häufig oben in der Hierarchie befinden und Daten aus den Stores abrufen und an ihre untergeordneten Elemente weiterleiten. Außerdem werden Aktionsersteller - Dispatcher-Hilfsmethoden - zur Unterstützung einer semantischen API verwendet, die alle Änderungen beschreibt, die in der Anwendung möglich sind. Es kann hilfreich sein, sie als vierten Teil des Flux-Aktualisierungszyklus zu betrachten.

Flux verzichtet auf MVC auf einen unidirektionalen Datenfluss. Wenn ein Benutzer mit einer React-Ansicht interagiert, leitet die Ansicht eine Aktion über einen zentralen Dispatcher an die verschiedenen Stores weiter, die die Daten und die Geschäftslogik der Anwendung enthalten, wodurch alle betroffenen Views aktualisiert werden. Dies funktioniert besonders gut mit dem deklarativen Programmierstil von React, der es dem Geschäft ermöglicht, Aktualisierungen zu senden, ohne festzulegen, wie Ansichten zwischen Zuständen wechseln sollen.

Datenfluss

Dies ist eine Übersicht der umfassenden Übersicht .

Das Flussmuster setzt die Verwendung eines unidirektionalen Datenflusses voraus.

  1. Aktion - einfach Objekt beschreibt Aktion type und andere Eingabedaten.

  2. Dispatcher - Single Action Receiver und Callbacks Controller. Stellen Sie sich vor, es ist ein zentraler Knotenpunkt Ihrer Anwendung.

  3. Store - enthält den Anwendungsstatus und die Logik. Er registriert den Rückruf im Dispatcher und gibt ein Ereignis aus, um anzuzeigen, wann eine Änderung der Datenschicht stattgefunden hat.

  4. Ansicht - Reagiert eine Komponente, die ein Änderungsereignis und Daten vom Speicher empfängt. Es bewirkt ein erneutes Rendern, wenn etwas geändert wird.

    Ab dem Flux-Datenfluss können Ansichten auch Aktionen erstellen und diese für Benutzerinteraktionen an den Dispatcher übergeben.

Umgekehrt

Um es klarer zu machen, können wir am Ende beginnen.

  • Verschiedene React-Komponenten ( Ansichten ) erhalten Daten aus verschiedenen Speichern über vorgenommene Änderungen.

    Nur wenige Komponenten können Controller-Views genannt werden , da sie den Glue-Code bereitstellen, um die Daten aus den Filialen zu erhalten und Daten in der Kette ihrer Nachkommen weiterzugeben. Controller-Ansichten repräsentieren alle wichtigen Bereiche der Seite.

  • Speicher können als Rückrufe bezeichnet werden, die den Aktionstyp und andere Eingabedaten für die Geschäftslogik Ihrer Anwendung vergleichen.

  • Der Dispatcher ist ein allgemeiner Empfänger für Aktionen und ein Callback-Container.

  • Aktionen sind nichts anderes als einfache Objekte mit dem erforderlichen type Eigenschaft.

    Früher sollten Sie Konstanten für Aktionstypen und Hilfsmethoden (so genannte Aktionsersteller ) verwenden.



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow