Menü

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.

Lesezeit: 11 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen
Von

Inhaltsverzeichnis

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.

  • Zugriff auf alle Inhalte von heise+
  • exklusive Tests, Ratgeber & Hintergründe: unabhängig, kritisch fundiert
  • c't, iX, Technology Review, Mac & i, Make, c't Fotografie direkt im Browser lesen
  • einmal anmelden – auf allen Geräten lesen - jederzeit kündbar
  • erster Monat gratis, danach monatlich 9,95 €
  • Wöchentlicher Newsletter mit persönlichen Leseempfehlungen des Chefredakteurs
GRATIS-Monat beginnen Jetzt GRATIS-Monat beginnen Mehr Informationen zu heise+