打造乾淨的 React 區域狀態：使用 Zustand + Context 建立可重用的 Store 工廠

'use client';

import { createContext, useContext, useState, type ReactNode } from 'react';
import { useStore, type StoreApi } from 'zustand';

export function createLocalStoreContext<TStore>(
  storeName: string,
  createStoreFn: () => StoreApi<TStore>,
) {
  const StoreContext = createContext<StoreApi<TStore> | null>(null);

  function Provider({ children }: { children: ReactNode }) {
    // 使用 useState lazy initializer 確保只在掛載時建立一次 store
    const [store] = useState(() => createStoreFn());

    return (
      <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
    );
  }

  Provider.displayName = `${storeName}Provider`;

  function useLocalStore<T>(selector: (state: TStore) => T): T {
    const store = useContext(StoreContext);
    if (!store) {
      throw new Error(`use${storeName} must be used within <${storeName}Provider>.`);
    }
    return useStore(store, selector);
  }

  function useLocalStoreApi(): StoreApi<TStore> {
    const store = useContext(StoreContext);
    if (!store) {
      throw new Error(`use${storeName}Api must be used within <${storeName}Provider>.`);
    }
    return store;
  }

  return {
    Provider,
    useStore: useLocalStore,
    useStoreApi: useLocalStoreApi,
  };
}

import { createStore } from 'zustand/vanilla';

interface CounterState {
  count: number;
  inc: () => void;
}

const { Provider, useStore, useStoreApi } = createLocalStoreContext(
  'Counter',
  () => createStore<CounterState>((set) => ({
    count: 0,
    inc: () => set((state) => ({ count: state.count + 1 })),
  }))
);

export { Provider as CounterProvider, useStore as useCounterStore };

function CounterPage() {
  return (
    <CounterProvider>
      <CounterDisplay />
      <CounterButton />
    </CounterProvider>
  );
}

function CounterDisplay() {
  // 具備完美的 TypeScript 型別推導與 Selector 效能優點
  const count = useCounterStore((s) => s.count);
  return <h1>Count: {count}</h1>;
}