1
// Zustand vanilla store 核心原理简化版
2
const createStoreImpl = (createState) => {
3
  let state;
4
  // 维护一个 Set 用于存放所有订阅了该 Store 的回调函数
5
  const listeners = new Set();
6

7
  const setState = (partial, replace) => {
8
    // 允许传入函数或对象进行更新
9
    const nextState = typeof partial === "function" ? partial(state) : partial;
10

11
    // 如果状态没有发生实质性改变，直接返回，避免不必要的派发
12
    if (!Object.is(nextState, state)) {
13
      const previousState = state;
14
      // 支持全量替换 (replace) 或部分合并 (assign)
15
      state = replace ? nextState : Object.assign({}, state, nextState);
16
      // 遍历通知所有监听器
17
      listeners.forEach((listener) => listener(state, previousState));
18
    }
19
  };
20

21
  const getState = () => state;
22

23
  const subscribe = (listener) => {
24
    listeners.add(listener);
25
    // 返回一个取消订阅的函数，供组件卸载时调用
26
    return () => listeners.delete(listener);
27
  };
28

29
  // 提供操作接口，并将其实例化
30
  const api = { setState, getState, subscribe };
31
  state = createState(setState, getState, api);
32
  return api;
33
};

1
import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
2

3
// Zustand 在 React 层的绑定逻辑
4
export function useStore(api, selector = api.getState, equalityFn) {
5
  // slice 是组件最终获取到的局部状态
6
  const slice = useSyncExternalStoreWithSelector(
7
    api.subscribe, // 外部 Store 提供的订阅函数
8
    api.getState, // 外部 Store 提供的获取全量状态函数
9
    api.getServerState || api.getState, // SSR 环境下的初始状态获取
10
    selector, // 局部状态选择器 (例如 state => state.bears)
11
    equalityFn, // 自定义比较函数 (例如 shallow)
12
  );
13
  return slice;
14
}

1
import { create } from 'zustand';
2
import { shallow } from 'zustand/shallow';
3

4
const useBearStore = create((set) => ({
5
  bears: 0,
6
  nuts: 0,
7
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
8
}));
9

10
// 组件只会在 bears 或 nuts 发生改变时渲染，不会受到其他状态影响
11
function BearCounter() {
12
  const { bears, nuts } = useBearStore(
13
    (state) => ({ bears: state.bears, nuts: state.nuts }),
14
    shallow
15
  );
16

17
  return <h1>{bears} bears, {nuts} nuts</h1>;
18
}

1
// 自定义日志中间件
2
const logMiddleware = (config) => (set, get, api) =>
3
  config(
4
    (args) => {
5
      console.log("  applying", args);
6
      // 调用底层原始的 set 方法
7
      set(args);
8
      console.log("  new state", get());
9
    },
10
    get,
11
    api,
12
  );
13

14
// 使用中间件
15
const useStore = create(
16
  logMiddleware((set) => ({
17
    count: 0,
18
    inc: () => set((state) => ({ count: state.count + 1 })),
19
  })),
20
);

1
import { create } from "zustand";
2
import { immer } from "zustand/middleware/immer";
3

4
const useDeepStore = create(
5
  immer((set) => ({
6
    deep: { nested: { obj: { count: 0 } } },
7
    inc: () =>
8
      set((state) => {
9
        // 利用 Immer 直接修改属性，无需层层展开拷贝
10
        state.deep.nested.obj.count += 1;
11
      }),
12
  })),
13
);