Einen eigenen Store mit useSyncExternalStore erstellen

Ein benutzerdefinierter Store benötigt drei Dinge: einen Zustand, eine subscribe-Methode zum Registrieren von Listenern und eine getSnapshot-Methode zum Lesen des aktuellen Zustands. Das ist der vollständige Vertrag, den useSyncExternalStore erwartet.

Wenn der Store so klein bleibt, ist er frameworkunabhängig, sodass derselbe Store innerhalb oder außerhalb von React verwendet werden kann.

Eine createStore-Factory nimmt einen Initialwert entgegen und gibt ein Objekt mit getSnapshot, subscribe und einer update-Methode zurück. Intern verwaltet sie den aktuellen Zustand und eine Menge von Listener-Callbacks.

Mit diesem Factory-Muster können Sie über eine einzige wiederverwendbare Funktion mehrere unabhängige Stores erstellen.

Wenn update den Zustand ändert, setzt die Funktion den neuen Wert und ruft anschließend jeden registrierten Listener auf. Diese Listener sind die Callbacks, die React über subscribe bereitgestellt hat.

Ihr Aufruf teilt React mit, dass sich der Store geändert hat. Daraufhin liest React getSnapshot erneut und rendert alle Komponenten neu, die aus dem Store lesen.

Eine Komponente liest aus dem Store, indem sie useSyncExternalStore mit den subscribe- und getSnapshot-Methoden des Stores aufruft. Der Hook gibt den aktuellen Wert zurück und rendert die Komponente bei Änderungen neu.

Sie können dies in einem benutzerdefinierten Hook wie useStore kapseln, sodass Komponenten nur eine Funktion aufrufen müssen, statt die Hook-Argumente jedes Mal selbst zu verbinden.

Da der Store ein Objekt auf Modulebene ist, verwendet jede Komponente, die ihn importiert, denselben Zustand; ein Context Provider ist nicht erforderlich. Es gibt keinen Komponentenbaum, den Sie umschließen müssen, und kein Prop Drilling.

Das ist ein wesentlicher Vorteil externer Stores: gemeinsam genutzter globaler Zustand mit einem einfachen Import-und-Verwenden-Modell statt einer Provider-Hierarchie.

Sie können anstelle eines monolithischen Stores mehrere kleine Stores erstellen, die jeweils einen State-Slice verwalten. Komponenten abonnieren nur die Slices, die sie benötigen.

Dadurch bleiben Zuständigkeiten getrennt und erneute Render-Vorgänge werden begrenzt, da die Änderung eines Slices niemals Komponenten beeinflusst, die aus einem anderen Slice lesen.

Zustand, eine beliebte minimalistische State-Management-Bibliothek, basiert genau auf diesem Muster und verwendet seit Version 4 intern useSyncExternalStore. Ihre kleine API ist im Wesentlichen eine ausgefeilte createStore-Implementierung mit einer Selektorschicht.

Wenn Sie diesen Zusammenhang erkennen, verlieren solche Bibliotheken ihren mystischen Charakter: Sie sind schlanke, ergonomische Wrapper über dasselbe Primitiv, das Sie selbst erstellen können.

Indem Sie an getSnapshot einen Selector übergeben, der nur den von einer Komponente verwendeten Teil des State zurückgibt, stellen Sie sicher, dass die Komponente nur dann neu gerendert wird, wenn sich dieser Teil ändert.

Dafür ist ein stabiles Ergebnis des Selectors erforderlich. Memorisieren Sie daher abgeleitete Werte, um die durch neue Referenzen verursachte Endlosschleife zu vermeiden und Updates weiterhin auf den relevanten Slice zu begrenzen.

Zum Debuggen können Sie einem Store ein Label zuweisen und Updates protokollieren oder ihn in Browser-Devtools integrieren, sodass Sie nachvollziehen können, welcher Store sich wann geändert hat.

Schon ein einfaches console.log innerhalb von update, das über ein Development-Flag aktiviert wird, hilft Ihnen dabei, den State-Fluss beim Erstellen des Stores zu verstehen.

Da der Store aus einfachem JavaScript besteht, können Sie seine Logik direkt testen: Rufen Sie update auf und prüfen Sie, ob getSnapshot den neuen Wert zurückgibt, ohne etwas zu rendern.

Sie können ihn auch innerhalb von React testen, indem Sie eine Komponente rendern, die daraus liest, und überprüfen, ob nach update ein erneutes Rendern erfolgt. So decken Sie sowohl den Store als auch seine Integration ab.

Ein benutzerdefinierter Store benötigt State, subscribe und getSnapshot. Eine createStore-Factory sowie ein update, das Listener benachrichtigt, stellen gemeinsamen globalen State ohne Provider bereit, da Modulimporte dieselbe Instanz verwenden.

Verwenden Sie mehrere Slice-Stores und Selector, um erneute Renderings zu begrenzen, und achten Sie dabei auf stabile Referenzen. Zustand v4+ basiert genau auf diesem Muster, und der Store in einfachem JavaScript lässt sich innerhalb und außerhalb von React leicht testen.