如何将Zustand的TypeScript状态管理代码转换为Context API实现？

原始Zustand自定义hook代码：

export const useStore = <T, F>(
  store: (callback: (state: T) => unknown) => unknown,
  callback: (state: T) => F,
) => {
  const result = store(callback) as F;
  const [data, setData] = useState<F>();

  useEffect(() => {
    setData(result);
  }, [result]);

  return data;
};

这段Zustand hook的核心是接收状态仓库和选择器，返回选择后的状态并同步更新。用Context API实现需要完成以下步骤：

完整的Context API实现 #

1. 创建状态Context与Provider #

先定义状态类型，创建Context和Provider组件来托管全局状态：

import { createContext, useContext, useState, ReactNode } from 'react';

// 定义状态的通用类型
type State<T> = T;
// Context类型，包含状态和状态更新方法
type StoreContextType<T> = {
  state: State<T>;
  setState: (updater: Partial<T> | ((prev: T) => Partial<T>)) => void;
};

// 创建Context，初始值设为null，由后续Provider提供实际值
const StoreContext = createContext<StoreContextType<any> | null>(null);

// 封装Provider组件，接收初始状态和子组件
export const StoreProvider = <T>({
  initialState,
  children,
}: {
  initialState: T;
  children: ReactNode;
}) => {
  const [state, setState] = useState<State<T>>(initialState);

  // 封装统一的状态更新逻辑，支持对象或回调函数
  const updateState = (updater: Partial<T> | ((prev: T) => Partial<T>)) => {
    setState(prev => {
      const newState = typeof updater === 'function' ? updater(prev) : updater;
      return { ...prev, ...newState };
    });
  };

  return (
    <StoreContext.Provider value={{ state, setState: updateState }}>
      {children}
    </StoreContext.Provider>
  );
};

2. 实现对应的useStore自定义hook #

这个hook模拟原Zustand版本的选择器功能，从Context中获取状态并返回选择后的结果：

export const useStore = <T, F>(selector: (state: T) => F): F => {
  const context = useContext(StoreContext);
  if (!context) {
    throw new Error('useStore must be used within a StoreProvider');
  }

  const { state } = context as StoreContextType<T>;
  // 同步选择后的状态，和原Zustand版本逻辑保持一致
  const [data, setData] = useState<F>(selector(state));

  // 状态变化时更新选择结果
  useEffect(() => {
    setData(selector(state));
  }, [state, selector]);

  return data;
};

使用示例 #

在应用根组件中用Provider包裹：

// 定义业务状态类型
type AppState = {
  count: number;
  username: string;
};

const App = () => {
  return (
    <StoreProvider<AppState> initialState={{ count: 0, username: 'guest' }}>
      <Counter />
      <UserInfo />
    </StoreProvider>
  );
};

在子组件中调用useStore获取状态：

const Counter = () => {
  const count = useStore((state: AppState) => state.count);
  const { setState } = useContext(StoreContext)!;

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setState(prev => ({ count: prev.count + 1 }))}>
        Increment
      </button>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Abdulghani Albaik