Zustandの動作原理を理解する（Closure とともに）

// vanilla.ts
const createStoreImpl = (createState) => {
  // --- クロージャの開始 ---
  let state;
  const listeners = new Set();

  const getState = () => state;

  const setState = (partial, replace) => {
    // partial は関数またはオブジェクトになり得る
    const nextState = typeof partial === 'function' ? partial(state) : partial;

    // 前の状態と次の状態が異なる場合のみ更新・通知
    if (!Object.is(nextState, state)) {
      const previousState = state;
      // 新しい状態で置き換え（オブジェクトはマージ、それ以外は上書き）
      state =
        replace ?? (typeof nextState !== 'object' || nextState === null)
          ? nextState
          : Object.assign({}, state, nextState);

      // すべての購読者（listener）に変更を通知
      listeners.forEach((listener) => listener(state, previousState));
    }
  };

  const subscribe = (listener) => {
    listeners.add(listener);
    // 購読解除関数を返す
    return () => listeners.delete(listener);
  };

  const destroy = () => listeners.clear();

  // 外部に公開する API オブジェクト
  const api = { setState, getState, subscribe, destroy };

  // 初期化！ createState を実行して初期状態を設定
  state = createState(setState, getState, api);

  return api;
  // --- クロージャの終わり ---
};

export const createStore = (createState) =>
  createState ? createStoreImpl(createState) : createStoreImpl;

import React from 'react';
import { createStore } from './vanilla.js';

// バニラストアとReactをつなぐブリッジフック
export function useStore(api, selector) {
  const slice = React.useSyncExternalStore(
    api.subscribe,
    () => selector(api.getState()),
    () => selector(api.getInitialState())
  );
  return slice;
}

const createImpl = (createState) => {
  // 1. バニラストアの API を生成（ここで state と listeners がクロージャにより生成）
  const api = createStore(createState);

  // 2. このストアにバインドされた専用フックを作成
  const useBoundStore = (selector) => useStore(api, selector);

  // 3. フック自体に API メソッド（setState など）を付与
  Object.assign(useBoundStore, api);

  return useBoundStore;
};

export const create = (createState) =>
  createState ? createImpl(createState) : createImpl;

// useSyncExternalStore の内部（簡略化）
useEffect(() => {
  if (checkIfSnapshotChanged(inst)) {
    forceUpdate({inst});
  }
  const handleStoreChange = () => {
    if (checkIfSnapshotChanged(inst)) {
      // 強制リレンダー
      forceUpdate({inst});
    }
  };
  // ストアを購読し、クリーンアップ関数を返す
  return subscribe(handleStoreChange);
}, [subscribe]);

const useBearStore = create((set, get) => ({
  bears: 0,
  increase: () => set(state => ({ bears: state.bears + 1 })),
}));

function Component() {
  const bears = useBearStore(state => state.bears);

  return <h1>{bears} bears</h1>;
}

// 1. ストアフックを作成
const useBearStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}));

// 2. コンポーネントでストアを使用
function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} bears</h1>;
}

// 3. 状態を更新
function Controls() {
  const increase = useBearStore((state) => state.increase);
  return <button onClick={increase}>one up</button>;
}