Was ist flux?

Flux Architektur

Flux ist ein Anwendungsarchitekturmuster für das Erstellen von Benutzeroberflächen. Es ergänzt das React Kompositionsansichtsparadigma und verwendet einen unidirektionalen Datenfluss. Es wurde von Facebook entwickelt, um die Herausforderungen bei der Verwaltung von Zuständen in großen, dynamischen Webanwendungen zu bewältigen.

Die Kernidee von Flux ist, dass die Daten immer in eine Richtung fließen, was das Debuggen und die Vorhersagbarkeit des Zustands der Anwendung vereinfacht.

Die Hauptkomponenten von Flux sind:

• Actions: Aktionen sind reine JavaScript-Objekte, die eine Information transportieren, dass "etwas passiert ist". Sie werden verwendet, um Daten an den Dispatcher zu übermitteln. Mehr darüber im Abschnitt Action.

• Dispatcher: Der Dispatcher ist ein zentraler Hub, der alle Aktionen empfängt und sie an alle registrierten Stores verteilt. Er sorgt für die unidirektionale Flussrichtung. Für mehr Informationen siehe Dispatcher.

• Stores: Stores enthalten den Anwendungszustand und die Logik, die diesen Zustand ändert. Sie reagieren auf Aktionen, die vom Dispatcher empfangen werden, und aktualisieren sich entsprechend. Nach einer Zustandsänderung benachrichtigen sie die Views, damit diese sich neu rendern können. Eine umfassende Erklärung zu Store ist ebenfalls verfügbar.

• Views: Views sind die eigentlichen Benutzeroberflächenelemente (oft React-Komponenten), die Daten aus den Stores anzeigen und dem Benutzer ermöglichen, mit der Anwendung zu interagieren. Wenn eine View eine Benutzeraktion ausführt, erstellt sie eine Action und sendet sie an den Dispatcher. Der Aspekt von View sollte nicht übersehen werden.

Der Fluss sieht wie folgt aus:

1. Der Benutzer interagiert mit der View.
2. Die View erstellt eine Action.
3. Die Action wird an den Dispatcher gesendet.
4. Der Dispatcher sendet die Action an alle Stores.
5. Ein Store, der sich für die Action interessiert, aktualisiert seinen Zustand.
6. Der Store benachrichtigt die Views, dass er sich geändert hat.
7. Die Views rendern sich mit den neuen Daten neu.

Vorteile von Flux:

• Vorhersagbarkeit: Der unidirektionale Datenfluss macht es einfacher zu verstehen, wie sich der Zustand der Anwendung ändert.
• Debuggen: Durch die klare Struktur und den unidirektionalen Datenfluss ist es einfacher, Fehler zu finden und zu beheben.
• Testbarkeit: Einzelne Komponenten können leichter isoliert und getestet werden.
• Wartbarkeit: Die klare Trennung von Zustandsverwaltung und Darstellung macht die Anwendung wartbarer.

Nachteile von Flux:

• Boilerplate-Code: Flux kann etwas Boilerplate-Code erfordern, insbesondere bei kleinen Anwendungen.
• Komplexität: Für einfache Anwendungen kann Flux unnötig komplex sein.

Alternativen zu Flux:

• Redux
• Context API
• MobX