JavaScript-Bibliothek React: State Management mit Redux
Der Aufwand für die Zustandsverwaltung einer React-Applikation steigt mit ihrem Umfang. Daher sollte man die Verwaltung mit der Bibliothek Redux zentralisieren.
- Sebastian Springer
Je umfangreicher die Applikation, desto aufwendiger die Verwaltung des Application State: also der Darstellung und aktuell präsentierten und vorgehaltenen Informationen in der Applikation. Daher gehen die großen Frontend-Frameworks dieses Problem an: In Angular hilft die Bibliothek NgRx, die einen reaktiven Store für die Zustandsverwaltung zur Verfügung stellt. Die Bibliothek für Vue.js trägt den Namen Vuex, und auch für React gibt es Implementierungen, von denen Redux die populärste ist. Sie folgen alle der Flux-Architektur.
Zentrales State Management spielt vor allem bei umfangreichen Applikationen seine Stärken aus. Der Grund dafür ist der komponentenbasierte Aufbau von React-Applikationen und der gerichtete Datenfluss in der Komponentenhierarchie. Bedarf es einer bestimmten Information an mehreren Stellen, gibt es in React zwei Möglichkeiten: Entweder erfolgt das Speichern der Information im Context und das Auslesen an den erforderlichen Stellen oder der Entwickler folgt dem Prinzip Lifting State Up. Dabei verschiebt er die Information weiter in Richtung Wurzel des Komponentenbaums, bis eine gemeinsame Elternkomponente der Komponenten erreicht ist, die die Information benötigt.
Die Verwendung von Context ist für häufig ausgelesene, aber nur von wenigen Stellen modifizierte Informationen interessant. Außerdem eignet er sich wenig für umfangreiche Strukturen, da die Verwaltung sehr schnell unübersichtlich und damit auch fehleranfällig wird. Lifting State Up führt dazu, dass sich der State der Applikation auf wenige zentrale Komponenten konzentriert. Diese neigen dazu, nicht nur viele Informationen, sondern auch die zugehörige Verwaltungslogik anzusammeln. Umfangreiche Komponenten führen jedoch wieder zu schlecht wartbarem Code. Außerdem erfolgt das Weiterreichen der Informationen an die Kindkomponenten, die diese benötigen, über Props (Parameter). Abhängig von der Struktur des Komponentenbaums vollzieht sich das Weiterreichen der Information über drei oder vier Ebenen, ohne dass die Komponenten diese Information wirklich brauchen.
Immer mehr Wissen. Das digitale Abo für IT und Technik.
OpenCore Legacy Patcher: Wie Sie alte Macs mit jungem macOS aufbrezeln
Wärmepumpe simpel und effektiv: Über die Rolle von Dämmung, Solar und Co.
Statt Passwörter: Wie Sie Accounts mit Passkeys schützen
Was Windows 11 Version 24H2 Neues bringt – und was rausfliegt
Drei KI-Sprechtrainer im Test: Fremdsprache mit KI lernen
Custom-ROM "GrapheneOS" vorgestellt: Android ganz privat
Immer mehr Wissen. Das digitale Abo für IT und Technik.
OpenCore Legacy Patcher: Wie Sie alte Macs mit jungem macOS aufbrezeln
Wärmepumpe simpel und effektiv: Über die Rolle von Dämmung, Solar und Co.
Statt Passwörter: Wie Sie Accounts mit Passkeys schützen
Was Windows 11 Version 24H2 Neues bringt – und was rausfliegt
Drei KI-Sprechtrainer im Test: Fremdsprache mit KI lernen