《互联网产品的客户端架构·端形态与体验基础》5.1 本地状态与共享状态

// file: src/state/store.ts
// tier: L1
// verify: node --test test/state/store.test.ts

export type Listener<T> = (value: T) => void;
export type Selector<T, S> = (state: T) => S;
export type Equality<S> = (a: S, b: S) => boolean;
export type Updater<T> = (state: T) => T;

export interface Store<T> {
  getState(): T;
  setState(next: T | Updater<T>): void;
  subscribe(listener: Listener<T>): () => void;
  select<S>(
    selector: Selector<T, S>,
    listener: Listener<S>,
    isEqual?: Equality<S>,
  ): () => void;
}

/**
 * 最小订阅容器：状态不可变，setState 只在引用变化时通知。
 * 不依赖框架、DOM 或调度器，监听同步执行，便于在 Node 里验证顺序。
 */
export function createStore<T>(initial: T): Store<T> {
  let state = initial;
  const listeners = new Set<Listener<T>>();

  const getState = (): T => state;

  const setState = (next: T | Updater<T>): void => {
    const value = typeof next === "function" ? (next as Updater<T>)(state) : next;
    if (Object.is(value, state)) return;
    state = value;
    for (const listener of [...listeners]) listener(state);
  };

  const subscribe = (listener: Listener<T>): (() => void) => {
    listeners.add(listener);
    return () => {
      listeners.delete(listener);
    };
  };

  const select = <S>(
    selector: Selector<T, S>,
    listener: Listener<S>,
    isEqual: Equality<S> = Object.is,
  ): (() => void) => {
    let current = selector(state);
    const onState = (next: T): void => {
      const value = selector(next);
      if (isEqual(value, current)) return;
      current = value;
      listener(value);
    };
    listeners.add(onState);
    return () => {
      listeners.delete(onState);
    };
  };

  return { getState, setState, subscribe, select };
}

export type StateScope = "local" | "shared" | "server-cache";
export type StateLifetime = "view" | "session" | "persist";

export interface ScopeInput {
  /** 读取这份状态的界面位置，按去重后的数量判断 */
  readers: string[];
  /** 当前持有者到共同祖先的层级距离 */
  ownerDepth: number;
  lifetime: StateLifetime;
  /** 数据是否以服务端为权威 */
  serverOwned: boolean;
}

export interface ScopeDecision {
  scope: StateScope;
  lift: boolean;
  reason: string;
}

/**
 * 判断一份状态该留在本地、提升到共享 store，还是交给服务端缓存层。
 * 服务端状态优先于任何提升规则；读取方数量优先于传递层级。
 */
export function decideStateScope(input: ScopeInput): ScopeDecision {
  if (input.serverOwned) {
    return {
      scope: "server-cache",
      lift: false,
      reason: "服务端是权威，端上只做缓存与失效",
    };
  }
  const readers = new Set(input.readers).size;
  if (readers >= 2) {
    return {
      scope: "shared",
      lift: true,
      reason: `${readers} 个读取方需要同一份数据`,
    };
  }
  if (input.lifetime !== "view" && input.ownerDepth >= 2) {
    return {
      scope: "shared",
      lift: true,
      reason: "跨两层传递且生命周期超过单次视图",
    };
  }
  return {
    scope: "local",
    lift: false,
    reason: "单一读取方且生命周期限于单次视图",
  };
}

node --test test/state/store.test.ts

✔ 订阅者在每次引用变化时同步收到新状态 (1.071667ms)
✔ 退订之后不再收到通知 (0.101625ms)
✔ 更新函数必须返回新对象，原状态不被就地修改 (0.092917ms)
✔ 返回同一引用时不通知，避免无意义重渲染 (0.153542ms)
✔ 选择器只在选中值变化时通知 (0.159375ms)
✔ 选择器可以使用自定义相等函数比较数组 (0.127583ms)
✔ 单一读取方的视图状态留在本地 (0.090125ms)
✔ 两个以上读取方时提升为共享状态 (0.125916ms)
✔ 跨层传递且生命周期超过视图时提升 (0.104417ms)
✔ 服务端状态优先于提升规则，交给缓存层 (0.109334ms)
ℹ tests 10
ℹ suites 0
ℹ pass 10
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 148.462458