Seite 5: Die Qual der Wahl

Inhaltsverzeichnis

Diese Artikelserie hat neben den React-eigenen Mitteln (useState und useReducer) drei externe Bibliotheken zur Arbeit mit globalem Zustand vorgestellt. Welche Bibliothek die beste Wahl für ein Projekt ist, hängt in erster Linie von den Anforderungen des Projekts ab. Allerdings gibt es ein paar grundsätzliche Unterschiede und Gemeinsamkeiten, die sich bei der Entscheidungsfindung berücksichtigen lassen.

Allen Bibliotheken gemeinsam ist, dass sie den State aus React-Komponenten herausholen. MobX und Redux sind im Kern sogar React-unabhängig, sodass sich Teile des Codes auch mit anderen UI-Bibliotheken verwenden lassen und die Abhängigkeit zu React verringert. Recoil ist nah am gewohnten React-Programmiermodell, allerdings noch neu, dementsprechend fehlt die Erfahrung mit dieser Bibliothek.

Redux und MobX sind schon lange auf dem Markt, sodass hier viel Erfahrung und Dokumentation vorliegt. Gegenüber MobX hat Redux eine stärkere Verbreitung und eine enge historische Bindung zu React. Mit der Einführung des offziellen Redux Toolkit ist frischer Wind in die Bibliothek eingekehrt. Viele Kritikpunkte, wie große Mengen an benötigtem Boilerplate-Code und das Verteilen von Code, der inhaltlich aber zusammengehört, sind damit adressiert worden. Das Laden und Cachen von Server-Daten wird nun explizit mit dem "RTK Query"-Projekt unterstützt.

Sowohl MobX als auch Redux bringen eine Reihe neuer Konzepte mit, die man verstehen muss. Redux ist dabei ganz klar funktional orientiert, mit MobX lassen sich auch Klassen verwenden – insbesondere Entwickler, die einen Hintergrund mit objektorientierter Programmierung haben, wird der Zugang zu MobX wahrscheinlicher leichter fallen als der zu Redux.

MobX und Recoil bringen Unterstützung für asynchronen Code mit, zum Beispiel für das Laden von Daten von einem Server. In MobX können asynchrone Funktionen am Store implementiert werden und in Recoil können die get-Funktionen asynchron sein. Redux ist von Haus aus synchron. Für die asynchrone Verarbeitung sind zusätzliche Bibliotheken (z. B. Thunk oder Saga) zu verwenden, deren Konzepte und Verwendung nicht immer trivial sind.

Für alle drei Bibliotheken stehen Developer-Tools für den Browser zur Verfügung, die zur Laufzeit helfen, Probleme im Code zu finden. Ihre Qualität ist unterschiedlich, insbesondere die Redux Developer Tools mitsamt Time Traveling Debugger sind sehr gut.

Auch wenn die Qual der Wahl beim Auswählen der passenden Lösung für das eigene Zustandsmanagement bleibt: Angesichts der verschiedenen Möglichkeiten sollte für jede Anwendung das Passende dabei sein.

Nils Hartmann ist freiberuflicher Softwareentwickler, Trainer und Coach aus Hamburg. Er programmiert in Java und JavaScript und berät und schult Teams beim Ein- und Umstieg in die Entwicklung von Single-Page-Anwendungen mit den Schwerpunkten React, TypeScript und GraphQL. Nils ist Autor des Buches "React – Grundlagen, fortgeschrittene Techniken, Praxistipps" (dpunkt.verlag 2019).

(ane)