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

1'use client';
2
3import { createContext, useContext, useState, type ReactNode } from 'react';
4import { useStore, type StoreApi } from 'zustand';
5
6export function createLocalStoreContext<TStore>(
7  storeName: string,
8  createStoreFn: () => StoreApi<TStore>,
9) {
10  const StoreContext = createContext<StoreApi<TStore> | null>(null);
11
12  function Provider({ children }: { children: ReactNode }) {
13    // 使用 useState lazy initializer 確保只在掛載時建立一次 store
14    const [store] = useState(() => createStoreFn());
15
16    return (
17      <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
18    );
19  }
20
21  Provider.displayName = `${storeName}Provider`;
22
23  function useLocalStore<T>(selector: (state: TStore) => T): T {
24    const store = useContext(StoreContext);
25    if (!store) {
26      throw new Error(`use${storeName} must be used within <${storeName}Provider>.`);
27    }
28    return useStore(store, selector);
29  }
30
31  function useLocalStoreApi(): StoreApi<TStore> {
32    const store = useContext(StoreContext);
33    if (!store) {
34      throw new Error(`use${storeName}Api must be used within <${storeName}Provider>.`);
35    }
36    return store;
37  }
38
39  return {
40    Provider,
41    useStore: useLocalStore,
42    useStoreApi: useLocalStoreApi,
43  };
44}

1import { createStore } from 'zustand/vanilla';
2
3interface CounterState {
4  count: number;
5  inc: () => void;
6}
7
8const { Provider, useStore, useStoreApi } = createLocalStoreContext(
9  'Counter',
10  () => createStore<CounterState>((set) => ({
11    count: 0,
12    inc: () => set((state) => ({ count: state.count + 1 })),
13  }))
14);
15
16export { Provider as CounterProvider, useStore as useCounterStore };

1function CounterPage() {
2  return (
3    <CounterProvider>
4      <CounterDisplay />
5      <CounterButton />
6    </CounterProvider>
7  );
8}

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