Web & Frontend · Fortgeschritten

Zustandsverwaltung in einer Web-App

In einem Satz: Das meiste, was Zustand genannt wird, sind Serverdaten am falschen Ort — trennen Sie sie, und die halbe Komplexität verschwindet.

Vier Arten von Zustand

Serverdaten. Listen, Elemente, Profil. Das sind Kopien einer entfernten Wahrheitsquelle und brauchen Cache-Behandlung: Laden, Aktualisieren, Ablaufen.

Oberflächenzustand. Ein offenes Panel, ein gewählter Reiter, getippter Text. Lebt in der Komponente, stirbt mit ihr.

Adresszustand. Filter, Seitennummerierung, Suche. Sein Platz ist in der URL — damit man ihn teilen und zurück navigieren kann.

Echter globaler Zustand. Angemeldeter Nutzer, Thema, Sprache. Sehr wenige Dinge.

Der häufige Fehler

Alles in einen globalen Speicher zu legen. Das Ergebnis: Jeder Bildschirm hängt von jedem Bildschirm ab, Daten veralten, ohne dass es jemand bemerkt, und Fehler, die nur auftauchen, wenn man einen Bildschirm in bestimmter Reihenfolge erreicht.

Beim Trennen verdampft der meiste globale Code. Was bleibt, ist klein und leicht zu verstehen.

Was ausdrückliche Behandlung braucht

Lade- und Fehlerzustände für jeden Abruf, das Verhindern veralteter Anfragen, die nach einer neueren zurückkehren, und optimistische Aktualisierungen, die zurückrollen können, wenn der Server ablehnte.

Im Detail

Definieren Sie eine Frischerichtlinie pro Datentyp — wie lange eine Kopie als gültig gilt und wann im Hintergrund aktualisiert wird. Ohne ausdrückliche Richtlinie erfindet jeder Bildschirm seine eigene, und dann wird „warum aktualisiert das nicht“ zu einem ewigen Fehler.