Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Erste Schritte mit der Flux-Architektur in React

by
Read Time:14 minsLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

In diesem Tutorial erfahren Sie mehr über die Flux-Architektur von Facebook und deren Verwendung für den Datenfluss in reaktionsbasierten Anwendungen. Zunächst werden die Grundlagen von Flux behandelt und die Motivation für seine Entwicklung verstanden. Anschließend üben wir das Gelernte, indem wir eine einfache virtuelle Brieftaschenanwendung erstellen.

Während des gesamten Tutorials gehe ich davon aus, dass Sie React bereits verwendet haben, aber keine Erfahrung mit Flux haben. Sie könnten etwas daraus machen, wenn Sie die Grundlagen von Flux bereits kennen und ein tieferes Verständnis erlangen möchten.

Wenn Sie in der React-Szene völlig neu sind, empfehle ich Ihnen, den Kurs Erste Schritte mit React von David East hier auf Envato Tuts+ zu absolvieren. Es ist ein fantastischer Kurs, der Sie in kürzester Zeit auf den neuesten Stand bringt.

Was ist Flux?

Flux ist hauptsächlich ein von Facebook entwickeltes Anwendungsarchitekturkonzept. Der gleiche Begriff bezieht sich jedoch auch auf eine Bibliothek, die die offizielle Implementierung darstellt.

Facebook kam mit Flux heraus, um die Probleme zu lösen, die durch das MVC-Muster in ihrer massiven Codebasis verursacht werden. Sie hatten mit Problemen zu kämpfen, bei denen Aktionen kaskadierende Updates auslösten, die zu unvorhersehbaren Ergebnissen und Code führten, der schwer zu debuggen war. Dies mag Ihnen bekannt vorkommen, wenn Sie zuvor MVC-Frameworks verwendet haben, da in den meisten Fällen alles eng miteinander verbunden ist. Wenn Sie dem Mix Beobachter und bidirektionale Datenbindungen hinzufügen, haben Sie Kopfschmerzen.

Mein Rat ist, jeden Versuch zu vermeiden, eine gemeinsame Basis zwischen Flux und MVC zu finden. Es wird nicht viel helfen, außer Ihre Verwirrung zu verstärken. Flux versucht, die Dinge anders zu lösen, und der Versuch, sie mit anderen Mustern zu vergleichen, hilft nicht weiter.

Projektaufbau

Wenn Sie dem Tutorial folgen möchten, stellen Sie zunächst sicher, dass Sie die erforderliche Software installiert haben. Wenn Sie fertig sind, klonen Sie den boilerplate-Zweig aus dem GitHub-Repository, das ich für diesen Artikel vorbereitet habe.

Hier sind die Softwareanforderungen und die Versionen, die ich zum Zeitpunkt des Schreibens dieses Artikels installiert hatte:

  • Git: 2.11
  • Node.js: 6.9
  • NPM: 3.10
  • Garn: 0.22
  • Ihr Editor Ihrer Wahl

Das Boilerplate dient als Ausgangspunkt für das bevorstehende kleine Projekt, das wir bauen werden, eine kleine virtuelle Brieftaschen-App. Es enthält die Webpack-Konfiguration zum Transpilieren der ES6-Syntax in einfaches JavaScript und WDS zum Bereitstellen der Dateien. Es hat auch einige CSS-Komponentenstile, so dass Sie direkt in die Codierung springen können.

Um alle erforderlichen Abhängigkeiten zu installieren, legen Sie eine cd in das Projektverzeichnis und führen Sie yarn aus.

Im nächsten Abschnitt richten Sie die Kernkomponenten der Anwendung ein, bevor Sie Flux integrieren. Ich habe sie nicht in die Heizplatte aufgenommen, da ich glaube, dass dies zu mehr Verwirrung führen würde. Wenn Sie nicht daran interessiert sind, die App zu erstellen, können Sie diese Schritte überspringen und zum nächsten Abschnitt springen.

Komponenten einrichten

Fügen Sie zunächst den folgenden Code in js/index.js ein, der als Einstiegspunkt für die Anwendung dient:

Erstellen Sie für die Hauptkomponente <App /> eine neue Datei in js/components mit dem Namen App.js und fügen Sie den folgenden Code hinzu:

Die <App />-Komponente umschließt zwei weitere Komponenten, eine für das Formular, das für das Hinzufügen neuer Elemente verantwortlich ist, und eine weitere für die Liste der Elemente. Um die <AddNewItem />-Komponente zu erstellen, erstellen Sie eine neue Datei AddNewItem.js in js/components und fügen Sie diesen Code hinzu:

Die Komponente bündelt eine Logik zum Aktualisieren des Status beim Aktualisieren der Formularfelder sowie eine grundlegende Validierung. Schließen Sie das Komponenten-Setup ab, indem Sie das letzte in js/components/ItemsList.js für die Artikelliste mit folgendem Code erstellen:

Das ist es! Sie sind mit dem Einrichten der Projektkomponenten fertig. Der große Teil ist, dass sie auch mit kostenlosem Styling kommen.

Führen Sie yarn start aus und warten Sie, bis sich das Bündel gebildet hat. Wenn Sie Ihren Browser auf localhost:8080 richten, sollte die App ohne Funktionalität angezeigt werden.

Als Nächstes wird erläutert, was Flux ist und wie Sie es verwenden können, um der Virtual Wallet-Anwendung Funktionen hinzuzufügen.

Die Flux-Bausteine

Auf hoher Ebene gliedert sich Flux in vier Hauptteile: Aktionen, Dispatcher, Geschäfte und Ansichten:

  • Aktionen beschreiben eine Aktion, die in der Anwendung stattgefunden hat.
  • Der Dispatcher ist eine Singleton-Registrierung von Rückrufen. Es fungiert als Vermittler, indem es die Aktionen an alle Geschäfte weiterleitet, die es abonniert haben.
  • Die Speicher verwalten den Status und die Logik, die zum Aktualisieren für bestimmte Teile der Anwendung erforderlich sind.
  • Ansichten sind einfache alte React-Komponenten.

In Flux fließen alle Daten in eine Richtung:

  • Aktionen werden mithilfe von Convenience-Klassen, die als Aktionsersteller bezeichnet werden, an den Dispatcher übergeben.
  • Der Dispatcher sendet (versendet) die Aktionen an alle Stores, die ihn abonniert haben.
  • Wenn sich die Stores schließlich um eine bestimmte Aktion kümmern, die empfangen wurde (oder mehr), aktualisieren sie ihren Status und signalisieren die Ansichten, damit sie sie erneut rendern können.

Unten finden Sie eine visuelle Darstellung dieses Prozesses.

Representation of how data flows in a Flux applicationRepresentation of how data flows in a Flux applicationRepresentation of how data flows in a Flux application

Aktionen

Daten werden mithilfe einfacher JavaScript-Objekte, die als Aktionen bezeichnet werden, in einer einzigen Richtung „über den Draht“ gesendet. Ihre Aufgabe ist es, ein Ereignis zu beschreiben, das in der Anwendung stattgefunden hat, und die neuen Daten zu den Filialen zu transportieren. Jede Aktion muss einen Typ und einen optionalen Nutzdatenschlüssel haben, der die Daten enthält. Eine Aktion sieht ähnlich aus wie die folgende:

Der Typ der Aktion muss durch eine beschreibende und konsistente Zeichenfolge in Großbuchstaben dargestellt werden - ähnlich der allgemeinen Konvention zum Definieren von Konstanten. Sie dienen als eindeutige IDs, anhand derer die Speicher die Aktion identifizieren und entsprechend reagieren.

Es ist üblich, alle Aktionstypen in einem Konstantenobjekt zu definieren und stattdessen auf dieses Objekt in der gesamten Anwendung zu verweisen, um die Konsistenz aufrechtzuerhalten. Unsere virtuelle Brieftasche unterstützt eine einzelne Aktion, mit der Elemente zur Liste hinzugefügt werden - sowohl Ausgaben als auch finanzielle Gewinne werden als ein einzelnes Element behandelt -, sodass unsere Konstantendatei sehr schmal ist.

Erstellen Sie eine index.js-Datei im Ordner js/constants und verwenden Sie den folgenden Code, um Ihren ersten Aktionstyp zu erstellen:

Aktionen werden an den Dispatcher mithilfe von Hilfsmitteln der Convenience-Klasse übergeben, die als Aktionsersteller bezeichnet werden und die einfache Aufgabe des Erstellens und Sendens der Aktion an den Dispatcher übernehmen. Bevor wir unseren Aktionsersteller erstellen, wollen wir uns zunächst ansehen, was der Dispatcher tut, und seine Rolle in Flux verstehen.

Der Dispatcher

Der Dispatcher wird verwendet, um die Kommunikation zwischen Aktionserstellern und Speichern zu koordinieren. Sie können damit den Rückruf des Aktionshandlers eines Geschäfts registrieren und Aktionen an die abonnierten Geschäfte senden.

Die API des Dispatchers ist einfach und es stehen nur fünf Methoden zur Verfügung:

  • register(): Registriert den Action-Handler-Rückruf eines Stores.
  • unregister(): Hebt die Registrierung des Rückrufs eines Stores auf.
  • waitFor(): Wartet darauf, dass die angegebenen Rückrufe zuerst ausgeführt werden.
  • dispatch(): Versendet eine Aktion.
  • isDispatching(): Überprüft, ob der Dispatcher gerade eine Aktion auslöst.

Die wichtigsten sind register() und dispatch(), da sie für die meisten Kernfunktionen verwendet werden. Mal sehen, wie sie hinter den Kulissen aussehen und funktionieren.

Dies ist natürlich das Wesentliche. Die register()-Methode speichert alle Rückrufe in einem privaten _callbacks-Array, und dispatch() iteriert und ruft jeden mit der empfangenen Aktion gespeicherten Rückruf auf.

Der Einfachheit halber schreiben wir keinen eigenen Dispatcher. Stattdessen verwenden wir die in der Facebook-Bibliothek bereitgestellte. Ich empfehle Ihnen, das GitHub-Repo von Facebook zu lesen und zu sehen, wie es implementiert ist.

Erstellen Sie im Ordner js/dispatcher eine neue Datei index.js und fügen Sie diesen Codeausschnitt hinzu:

Es importiert den Dispatcher aus der flux-Bibliothek, die zuvor mit Garn installiert wurde, und exportiert dann eine neue Instanz davon.

Wenn der Dispatcher jetzt bereit ist, können wir zu den Aktionen zurückkehren und den Aktionsersteller unserer App einrichten. Erstellen Sie im Ordner js/actions eine neue Datei mit dem Namen walletActions.js und fügen Sie den folgenden Code hinzu:

Die WalletActions-Klasse stellt eine addNewItem()-Methode bereit, die drei grundlegende Aufgaben behandelt:

  • Es erhält einen item als Argument.
  • Mit dem Dispatcher wird eine Aktion mit dem zuvor erstellten Aktionstyp ADD_NEW_ITEM ausgelöst.
  • Anschließend wird das empfangene item zusammen mit dem Aktionstyp als Nutzlast gesendet.

Bevor Sie diesen Aktionsersteller verwenden, sehen wir uns an, was Stores sind und wie sie in unsere Flux-basierte Anwendung passen.

Stores

Ich weiß, ich sagte, Sie sollten Flux nicht mit anderen Mustern vergleichen, aber Flux-Stores ähneln in gewisser Weise den Modellen in MVC. Ihre Aufgabe besteht darin, die Logik zu handhaben und den Status für eine bestimmte Komponente der obersten Ebene in Ihrer Anwendung zu speichern.

Alle Flux-Stores müssen eine Action-Handler-Methode definieren, die dann beim Dispatcher registriert wird. Diese Rückruffunktion besteht hauptsächlich aus einer switch-Anweisung für den empfangenen Aktionstyp. Wenn ein bestimmter Aktionstyp erfüllt ist, handelt er entsprechend und aktualisiert den lokalen Status. Schließlich sendet der Speicher ein Ereignis, um die Ansichten über den aktualisierten Status zu signalisieren, damit sie entsprechend aktualisiert werden können.

Um Ereignisse zu übertragen, müssen Geschäfte die Logik eines Ereignissenders erweitern. Es stehen verschiedene Ereignisemitter-Bibliotheken zur Verfügung. Die häufigste Lösung ist jedoch die Verwendung des Ereignisemitters von Node. Für eine einfache App wie eine virtuelle Geldbörse ist nicht mehr als ein Geschäft erforderlich.

Erstellen Sie im Ordner js/store eine neue Datei mit dem Namen walletStore.js und fügen Sie den folgenden Code für den Store unserer App hinzu:

Wir importieren zunächst die erforderlichen Abhängigkeiten, die für den Store erforderlich sind, beginnend mit dem Ereignisemitter des Knotens, dem Dispatcher, gefolgt von den Aktionstypen. Sie werden feststellen, dass sich darunter eine ständige CHANGE befindet, ähnlich den Aktionstypen, die Sie zuvor kennengelernt haben.

Es ist eigentlich keines und sollte nicht verwechselt werden. Es ist eine Konstante, die für den Ereignisauslöser verwendet wird, wenn sich die Daten des Geschäfts ändern. Wir werden es in dieser Datei behalten, da es kein Wert ist, der in anderen Teilen der Anwendung verwendet wird.

Bei der Initialisierung beginnt die WalletStore-Klasse mit der Registrierung des Rückrufs _registerToAction() beim Dispatcher. Hinter den Kulissen wird dieser Rückruf dem Array _callbacks des Dispatchers hinzugefügt.

Die Methode verfügt über eine einzelne switch-Anweisung über den Aktionstyp, der vom Dispatcher beim Versenden einer Aktion empfangen wird. Wenn es den Aktionstyp ADD_NEW_ITEM erfüllt, führt es die Methode _addNewItem() aus und leitet die empfangene Nutzlast weiter.

Die Funktion _addNewItem() legt eine id für das Element fest, verschiebt sie in die Liste der vorhandenen Elemente und gibt dann ein CHANGE-Ereignis aus. Als Nächstes sind die Methoden getAllItems() und getTotalBudget() grundlegende Getter, mit denen wir den Status des aktuellen Geschäfts und das Gesamtbudget abrufen.

Die letzten beiden Methoden, addChangeListener() und removeChangeListener(), werden verwendet, um die React-Komponenten mit dem WalletStore zu verknüpfen, damit sie benachrichtigt werden, wenn sich die Daten des Geschäfts ändern.

Controller-Ansichten

Mit React können wir Teile der Anwendung in verschiedene Komponenten aufteilen. Wir können sie verschachteln und interessante Hierarchien erstellen, die Arbeitselemente auf unserer Seite bilden.

In Flux speichern Komponenten am oberen Rand der Kette in der Regel den größten Teil der Logik, die zum Generieren von Aktionen und zum Empfangen neuer Daten erforderlich ist. Daher werden sie als Controller-Ansichten bezeichnet. Diese Ansichten sind direkt mit Filialen verknüpft und warten auf die Änderungsereignisse, die beim Aktualisieren der Filialen ausgelöst werden.

In diesem Fall rufen Controller-Ansichten die setState-Methode auf, die die render()-Methode auslöst, um die Ansicht auszuführen und zu aktualisieren und Daten über Requisiten an untergeordnete Komponenten zu senden. Von dort aus zaubern React und das virtuelle DOM ihre Magie und aktualisieren das DOM so effizient wie möglich.

Unsere App ist einfach genug und respektiert diese Regel im Buch nicht. Abhängig von der Komplexität können größere Apps jedoch manchmal mehrere Controller-Ansichten mit verschachtelten Unterkomponenten für die Hauptteile der Anwendung erfordern.

Zusammenpassen

Wir haben die Hauptteile von Flux fertiggestellt, aber die Virtual Wallet-App ist noch nicht fertiggestellt. In diesem letzten Abschnitt überprüfen wir den gesamten Ablauf von Aktionen bis zu Ansichten und geben den fehlenden Code ein, der zum Abschließen des unidirektionalen Datenflusses von Flux erforderlich ist.

Eine Aktion auslösen

Wenn Sie zur Komponente <AddNewItem /> zurückkehren, können Sie jetzt das WalletActions-Modul einschließen und damit eine neue Aktion in der Methode _addNewItem() generieren.

Wenn das Formular gesendet wird, wird eine Aktion ausgelöst und alle Geschäfte - in unserem Fall eines - über die neuen Daten benachrichtigt.

Auf Änderungen im Geschäft warten

In Ihrem WalletStore ändert sich derzeit der Status eines Elements, wenn es zur Liste hinzugefügt wird, und das CHANGE-Ereignis wird ausgelöst, aber niemand hört zu. Schließen wir die Schleife, indem wir einen Änderungslistener in die <ItemsList />-Komponente einfügen.

Die aktualisierte Komponente schließt den unidirektionalen Datenfluss von Flux. Beachten Sie, dass ich die gesamte render()-Methode übersprungen habe, um Platz zu sparen. Lassen Sie uns Schritt für Schritt durch die Neuerungen gehen:

  • Das WalletStore-Modul befindet sich oben.
  • Der Anfangsstatus wird aktualisiert, um stattdessen den Status des Geschäfts zu verwenden.
  • Eine neue _onChange()-Methode wird verwendet, um den Status mit den neuen Daten aus dem Speicher zu aktualisieren.
  • Mithilfe der Lifecycle-Hooks von React wird der Rückruf _onChange() als Rückruf für den Änderungslistener des Geschäfts hinzugefügt und entfernt.

Abschluss

Glückwunsch! Sie haben die Erstellung einer funktionierenden virtuellen Brieftaschen-App mit Flux abgeschlossen. Sie haben gelernt, wie alle Flux-Komponenten miteinander interagieren und wie Sie React-Apps damit strukturieren können.

Wenn Sie sich in Ihren Flux-Fähigkeiten sicher fühlen, sollten Sie auch andere Flux-Implementierungen wie Alt, Delorean, Flummox oder Fluxxor ausprobieren und herausfinden, welche für Sie richtig ist.

Lassen Sie mich Ihre Gedanken in den Kommentaren unten wissen. Ich würde gerne wissen, was Sie über Flux denken, oder Ihnen helfen, wenn Sie Schwierigkeiten haben, dem Tutorial zu folgen. Wenn Sie möchten, können Sie mich auch auf Twitter @hiskio erreichen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.