Store 实现

概述

Claude Code 实现了一个极简的 Zustand 风格 Store，仅 35 行代码。

Source: src/state/store.ts (35 行)

Store 类型

// Source: src/state/store.ts:4-8
type Store<T> = {
  getState: () => T
  setState: (updater: (prev: T) => T) => void
  subscribe: (listener: Listener) => () => void
}

实现

// Source: src/state/store.ts:10-34
export function createStore<T>(
  initialState: T,
  onChange?: (args: { newState: T; oldState: T }) => void,
): Store<T> {
  let state = initialState;
  const listeners = new Set<Listener>();
  
  return {
    getState: () => state,
    
    setState: (updater) => {
      const oldState = state;
      const newState = updater(oldState);
      
      // Object.is 相等性检查，避免冗余通知
      if (!Object.is(oldState, newState)) {
        state = newState;
        onChange?.({ newState, oldState });
        listeners.forEach(listener => listener());
      }
    },
    
    subscribe: (listener) => {
      listeners.add(listener);
      return () => listeners.delete(listener);  // 返回取消订阅函数
    },
  };
}

设计亮点

1. 极简实现

整个 Store 只有 25 行有效代码，没有中间件、Action、Reducer 等概念。

2. Object.is 相等性

使用 Object.is 避免值未变时的冗余通知。组合 useAppState(selector) 的选择器模式，实现细粒度的重渲染控制。

3. Set 订阅者管理

使用 Set<Listener> 管理订阅者，subscribe() 返回的卸载函数直接从 Set 中删除。

4. 可选 onChange 回调

onChange 回调接收 { newState, oldState }，用于副作用处理（遥测、分析等）。

与 React 的集成

useSyncExternalStore 是 React 18+ 的标准 Hook，用于安全地从外部 Store 读取数据，保证并发安全。

为什么不用 Zustand？

虽然实现类似 Zustand，但 Claude Code 选择了自己实现：

• 零依赖 — 不需要额外的 npm 包
• 精确控制 — onChange 回调提供了 oldState/newState 对比
• 极简 — 没有用不到的功能（中间件、persist 等）
• 类型安全 — 完全泛型化，无需额外类型工具

下一步

• 会话级单例 — bootstrap/state.ts 中的全局状态