Budowanie niestandardowego store’a za pomocą useSyncExternalStore

Niestandardowy store potrzebuje trzech elementów: pewnego stanu, metody subscribe do rejestrowania listenerów oraz metody getSnapshot do odczytywania bieżącego stanu. To pełny kontrakt wymagany przez useSyncExternalStore.

Tak niewielki store pozostaje niezależny od frameworka, dlatego można go używać zarówno wewnątrz Reacta, jak i poza nim.

Fabryka createStore przyjmuje wartość początkową i zwraca obiekt zawierający getSnapshot, subscribe oraz metodę update. Wewnątrz przechowuje bieżący stan i zbiór callbacków listenerów.

Ten wzorzec fabryki pozwala tworzyć wiele niezależnych store'ów za pomocą jednej funkcji wielokrotnego użytku.

Gdy update zmienia stan, ustawia nową wartość, a następnie wywołuje każdy zarejestrowany listener. Są to callbacki przekazane przez Reacta za pośrednictwem subscribe.

Ich wywołanie informuje Reacta, że store się zmienił, co skłania go do ponownego odczytania getSnapshot i ponownego renderowania komponentów korzystających ze store'a.

Komponent odczytuje dane ze store'a, wywołując useSyncExternalStore z metodami subscribe i getSnapshot tego store'a. Hook zwraca bieżącą wartość i ponownie renderuje komponent, gdy ta wartość się zmieni.

Można opakować tę logikę w niestandardowy hook, taki jak useStore, aby komponenty wywoływały jedną funkcję zamiast za każdym razem samodzielnie przekazywać argumenty hooka.

Ponieważ store jest obiektem na poziomie modułu, każdy komponent, który go importuje, współdzieli ten sam stan — nie jest wymagany Context Provider. Nie trzeba opakowywać drzewa komponentów ani przekazywać właściwości przez wiele poziomów.

To jedna z głównych zalet zewnętrznych store'ów: współdzielony globalny stan z płaskim modelem importowania i używania zamiast hierarchii Providerów.

Można utworzyć kilka niewielkich store'ów, z których każdy zarządza własnym fragmentem stanu, zamiast tworzyć jeden monolityczny store. Komponenty subskrybują tylko te fragmenty, które ich dotyczą.

Ułatwia to rozdzielenie odpowiedzialności i ogranicza ponowne renderowanie, ponieważ zmiana jednego fragmentu nigdy nie wpływa na komponenty odczytujące inny fragment.

Zustand, popularna minimalistyczna biblioteka do zarządzania stanem, opiera się dokładnie na tym wzorcu i od wersji 4 wewnętrznie korzysta z useSyncExternalStore. Jej niewielkie API to w zasadzie dopracowany createStore z warstwą selektorów.

Zrozumienie tego powiązania pozwala lepiej poznać takie biblioteki: są one cienkimi, wygodnymi nakładkami na ten sam prymityw, który można samodzielnie zbudować.

Przekazując do getSnapshot selektor, który zwraca tylko tę część stanu, z której korzysta komponent, zapewnia się, że komponent zostanie ponownie wyrenderowany tylko wtedy, gdy ta część ulegnie zmianie.

Wymaga to stabilnego wyniku selektora, dlatego wartości pochodne należy memoizować, aby uniknąć nieskończonej pętli powodowanej nową referencją, a jednocześnie ograniczyć aktualizacje do odpowiedniego fragmentu stanu.

Podczas debugowania można dołączyć etykietę do store i logować aktualizacje albo zintegrować go z narzędziami deweloperskimi przeglądarki, aby śledzić, który store uległ zmianie i kiedy.

Nawet prosty log w konsoli umieszczony wewnątrz update i uaktywniany wyłącznie przy włączonej fladze deweloperskiej pomaga zrozumieć przepływ stanu podczas budowania store.

Ponieważ store jest zwykłym kodem JavaScript, można bezpośrednio testować jego logikę: wywołać update i sprawdzić asercją, że getSnapshot zwraca nową wartość, bez renderowania czegokolwiek.

Można także przetestować go wewnątrz React, renderując komponent, który odczytuje dane ze store, i sprawdzając, czy po update następuje ponowne renderowanie. Pozwala to objąć testami zarówno store, jak i jego integrację.

Przypomnij sobie kontrakt metody subscribe własnego store.

Własny store potrzebuje state, subscribe i getSnapshot. Fabryka createStore oraz funkcja update powiadamiająca nasłuchujących zapewniają współdzielony globalny stan bez Provider, ponieważ importy modułu współdzielą jedną instancję.

Warto używać wielu store’ów dla poszczególnych fragmentów stanu oraz selektorów ograniczających ponowne renderowanie, pamiętając o stabilnych referencjach. Zustand v4+ opiera się dokładnie na tym wzorcu, a store w zwykłym JavaScript łatwo testować zarówno wewnątrz React, jak i poza nim.