Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

ReactJS lernen

Unidirektionaler Datenfluss mit Flux

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Um auch bei komplexen Anwendungen sicherzustellen, dass die Daten stets an der richtigen Komponente ankommen, hat Facebook die Flux-Architektur entwickelt. In diesem Video erfahren Sie, aus welchen Elementen diese Architektur besteht.
02:29

Transkript

Sobald eine Anwendung eine gewisse Größe und damit Komplexität erreicht hat, kann es vorkommen, dass Änderungen in einer React-Komponente eine ganze Kette an Updates in der ganzen Applikation auslösen. Um dabei nicht den Überblick zu verlieren und unangenehme Nebeneffekte oder Fehler wie zyklische Updates zu vermeiden, ist es in React üblich, das Prinzip des unidirektionalen Datenflusses zu verwenden. An dieser Stelle setzt die Flux-Architektur an. Ziel dieser Architektur ist es, ein gewisses Schema zu definieren, wie Events in einer Anwendung verarbeitet werden können, sodass diese an einer beliebigen Stelle in der Applikation ausgelöst werden können, und daraus resultierende Updates an die richtigen Komponenten gelangen. Dabei orientiert sich Flux am unidirektionalen Datenfluss. Das heißt, Daten dürfen nur von oben nach unten fließen. Eine Komponente darf also nie die Darstellung oder den Zustand einer darüber liegenden Komponente verändern, nur umgekehrt. Eines der grundlegenden Elemente in Flux ist die Action. Sie entspricht einem Event. Eine Action ist ein einfaches Objekt, das nur über einen Type verfügen muss. Actions werden an den Dispatcher gesendet, der nur als Verteiler fungiert, und dafür zuständig ist, dass die Actions zu den passenden Stores gelangen. Stores registrieren sich per Callback am Dispatcher. Sie beinhalten den Zustand der Applikation und verfügen über die notwendige Logik, um die Aktionen zu verarbeiten und damit ihren eigenen Zustand zu aktualisieren. Sobald ein Store seinen Zustand aktualisiert hat, löst er ein Change-Event aus. Sogenannte Controller-Views warten auf Change-Events von den Stores, empfangen die neuen Daten und propagieren diese entsprechend an ihre Unterkomponenten. Diese Views beziehungsweise deren Unterkomponenten können wiederum Actions auslösen, die an den Dispatcher zur weiteren Verteilung und Verarbeitung gesendet werden. An dieser Stelle schließt sich der Kreis. Sie haben gerade die grundlegenden Prinzipien hinter der Flux-Architektur kennengelernt. Sie wissen, dass der unidirektionale Datenfluss besagt, dass eine Komponente nie den Zustand oder die Darstellung einer darüber liegenden Komponente beeinflussen sollte. Bei Flux wird das dadurch erreicht, dass nur Stores die Views updaten dürfen, und diese wiederum die in ihnen enthaltenen Komponenten. Sofern eine View oder Komponente ein Update starten möchte, muss diese eine Action auslösen und diese an den Dispatcher überreichen.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!