讓sessionStorge結合useSyncExternalStore，一更新其他components都知道

前一陣子遇到一個問題，一直在嘗試如何讓sessionStorage / localStorage / cookie有變動時，react遙遠的其他元件也可以知道其變化。於是乎就找到了一個codeSandbox，其原理就是透過 useSyncExternalStore 去通知有subscribe的元件，讓他們知道sessionStorage / localStorage / cookie key-value有變動，

sessionStore

原先codeSandbox的寫法裡，會發現subscribe會add到不屬於同個itemName的listener，導致notify forEach的次數增加。雖然最終會因為useSyncExternalStore裡checkIfSnapshotChanged沒變，讓實際update到的元件維持在被改變sessionStorage key-value pairs的元件。不過讓forEach少跑一點也不是件壞事。

這邊稍微改一下讓cache可以跟sessionStorage一樣的key-value pairs，同時讓subscribe需要通知的listeners只有key對應到的useSyncExternalStore。做法就是先讓sessionStore改為higher-order function，讓第一階(first-order)有個cache，其儲存的內容與sessionStorage get, set, and remove 一致，然後回傳higher-order sessionStore，讓他們各自有各自的listeners。最後要export出來的其實是 const store = sessionStore();，這樣就完成第一部的改寫了。

可以觀察notify裡listeners.size的數量

reactiveSessionStorage/sessionStore.ts

type Listener = () => void;

// higher-order function
const sessionStore = () => {
  // First-order scoped, create cache when sessionStore initialized
  const cache = new Map<string, any>();

  return () => {
    // Higher-order scoped, each store has a listeners
    const listeners = new Set<Listener>();
    const subscribe = (listener: Listener) => {
      listeners.add(listener);
      return () => {
        listeners.delete(listener);
      };
    };

    const notify = () => listeners.forEach((l) => l());

    const get = <T>(itemName: string) => {
      const value = cache.get(itemName);
      if (value) return value;
      const sessionValue = sessionStorage.getItem(itemName);
      if (!sessionValue) return undefined;

      const cachedValue = JSON.parse(sessionValue) as T;
      cache.set(itemName, cachedValue);
      return cachedValue;
    };

    const update = <T>(itemName: string, v: T) => {
      cache.set(itemName, v);
      sessionStorage.setItem(itemName, JSON.stringify(v));
      notify();
    };

    const remove = (itemName: string) => {
      cache.delete(itemName);
      sessionStorage.removeItem(itemName);
      notify();
    };

    return {
      subscribe,
      get,
      update,
      remove,
    };
  };
};

// export this store
const store = sessionStore();

export type SessionStoreType = ReturnType<typeof store>;
export default store;

Singleton class

再做個higher-order function去create storage讓storeMap在first-order function內，然後return (itemName: string) => SessionStoreType形式的function。

這邊也可以改寫成Singleton class + getStore function，讓我們不必重複建立sessionStore，後面也可以直接呼叫singleton getStore來操作先前建立過的sessionStore的get, set, update function

reactiveSessionStorage/createReactiveSessionStorage.ts

import sessionStore from './sessionStore';
import type { SessionStoreType } from './sessionStore';

const createReactiveSessionStorage = () => {
  const storeMap: Map<string, SessionStoreType> = new Map();
  return (itemName: string) => {
    if (storeMap.get(itemName)) return storeMap.get(itemName);
    storeMap.set(itemName, getSessionStore());
    return storeMap.get(itemName);
  };
};

export const getStorage = createReactiveSessionStorage();

custom hooks: useReactiveSessionStorage, useSessionActions

最後，把他們跟useSyncExternalStore綁在一起，變成一個custom hook，

useReactiveSessionStorage訂閱useSyncExternalStore，同時return value, update function, remove function
useSessionActions，很純粹的操作 getStorage(itemName)，不依賴useSyncExternalStore

reactiveSessionStorage/useReactiveSessionStorage.ts

'use client';
import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';

import type { SessionStoreType } from './sessionStore';
import { getStorage } from './createReactiveSessionStorage';

const useReactiveSessionStorage = <T>(itemName: string) => {
  const storeRef = useRef<SessionStoreType>(getStorage(itemName));

  const [selector, update, remove] = useMemo(
    () => [
      // selector
      (): T => storeRef.current?.get<T>(itemName),
      // update
      (v: T) => storeRef.current?.update<T>(itemName, v),
      // remove
      () => storeRef.current?.remove(itemName),
    ],
    [itemName]
  );

  const value = useSyncExternalStore(storeRef.current.subscribe, selector, selector);
  return [value, update, remove] as const;
};

export const useSessionActions = <T>(itemName: string) => {
  const actions = useMemo(
    () => [
      // update
      (v: T) => getStorage(itemName).update<T>(itemName, v),
      // remove
      () => getStorage(itemName).remove(itemName),
    ],
    [itemName]
  );

  return actions;
};

export default useReactiveSessionStorage;

這樣一個設計就可以讓sessionStorage有變動的時候也update使用useReactiveSessionStorage custom hook的元件。

那再來看看chatGPT怎麼說: https://chatgpt.com/s/t_6854dd517540819187228164a5ebe8ef

然後看看perplexity怎麼說: https://www.perplexity.ai/search/how-to-use-session-with-usesyn-hUmoT5lMQIeDIAz31ysNpQ#0

AI的方法比較傾向使用window event listerner，Perplexity又相對簡潔，更換storage只要換eventListener就好。而我的做法是換storage higher-order function。除了這些方法外，zustand state management套件也有Persisting store可以用，三種寫法各有利弊，再讓需要的人看看。