Obsługa zdarzeń pamięci między kartami

Gdy użytkownik ma aplikację otwartą w dwóch kartach i aktualizuje wartość w karcie A, karta B nadal wyświetla stary stan. Każda karta ma własny stan Reacta w pamięci, mimo że współdzielą localStorage.

Bez synchronizacji karty mają różne informacje o bieżącej wartości.

Przeglądarka wysyła zdarzenie storage do innych kart tego samego origin za każdym razem, gdy zmieni się localStorage. Co ważne, zdarzenie nie jest wywoływane w karcie, która wprowadziła zmianę.

Jest to dokładnie sygnał, którego karta B potrzebuje, aby dowiedzieć się, że karta A zaktualizowała dane.

Wewnątrz useEffect należy wywołać window.addEventListener('storage', handler) i zwrócić funkcję czyszczącą, która usuwa nasłuchiwanie. W ten sposób komponent subskrybuje zmiany między kartami.

Efekt powinien uruchomić się raz podczas montowania komponentu, dlatego odpowiednia będzie pusta lub stabilna tablica zależności.

Obiekt zdarzenia zawiera key (klucz, który się zmienił), oldValue i newValue (ciągi znaków odpowiednio sprzed zmiany i po niej) oraz storageArea (zmieniony obiekt magazynu).

Klucz null wraz z wartościami null oznacza, że cały magazyn został wyczyszczony.

Zdarzenie storage jest wywoływane dla każdego klucza w obrębie origin, dlatego procedura obsługi powinna sprawdzić event.key === yourKey przed reakcją. Ignorowanie niezwiązanych kluczy zapobiega niepotrzebnym ponownym renderowaniom.

Należy również obsłużyć sytuację, w której event.newValue ma wartość null, co oznacza usunięcie klucza.

Gdy nadejdzie istotna zmiana, należy sparsować event.newValue i wywołać setter, aby zaktualizować stan Reacta. Dzięki temu druga karta zostaje zsynchronizowana ze zmianą wprowadzoną w innym miejscu.

W połączeniu z hookiem useLocalStorage zamyka to cykl synchronizacji między kartami.

BroadcastChannel umożliwia kartom tego samego origin bezpośrednie wysyłanie do siebie wiadomości za pomocą postMessage. Jest to rozwiązanie bardziej przejrzyste niż wykorzystywanie zdarzeń storage i działa nawet bez zapisywania danych w localStorage.

Należy utworzyć kanał o określonej nazwie, wysyłać aktualizacje i nasłuchiwać zdarzeń message.

React udostępnia useSyncExternalStore do subskrybowania zewnętrznych magazynów w sposób bezpieczny dla renderowania współbieżnego. Funkcję subskrypcji można połączyć ze zdarzeniem storage, a migawkę — z odczytem localStorage.

Pozwala to poprawnie zintegrować aktualizacje zewnętrznego magazynu z renderowaniem Reacta.

Klasycznym przypadkiem użycia jest wylogowanie ze wszystkich kart: gdy jedna karta usuwa flagę uwierzytelniania, zdarzenie storage w pozostałych kartach wykrywa tę zmianę i przekierowuje je do ekranu logowania.

Zapobiega to sytuacji, w której nieaktualna karta nadal wyświetla uwierzytelnioną zawartość.

Motyw również świetnie się do tego nadaje: włączenie trybu ciemnego w jednej karcie zapisuje zmianę w localStorage, zdarzenie storage jest wywoływane w pozostałych kartach, a one natychmiast aktualizują swój stan motywu.

Użytkownik widzi spójny wygląd niezależnie od tego, na którą kartę przełączy.

Synchronizacja między kartami sprowadza się do nasłuchiwania zdarzenia storage (lub użycia BroadcastChannel), filtrowania własnych kluczy i aktualizowania stanu Reacta na podstawie nowej wartości.

W przypadku solidnych subskrypcji bezpiecznych dla renderowania współbieżnego nowoczesnym wyborem jest useSyncExternalStore.

Dowiedziałeś się, że zdarzenie storage jest wywoływane w innych kartach, a także jak nasłuchiwać tego zdarzenia, filtrować je według klucza i aktualizować stan. Poznałeś również alternatywy w postaci BroadcastChannel i useSyncExternalStore.

Poznałeś rzeczywiste przypadki użycia, takie jak wylogowanie ze wszystkich kart i synchronizacja trybu ciemnego między kartami.