常见陷阱与最佳实践

// ❌ 每次选择器执行都创建新对象 → Object.is 永远 false → 无限重渲染
const { bears, fishes } = useStore((s) => ({
  bears: s.bears,
  fishes: s.fishes,
}));

// ❌ 每次返回新数组
const [bears, fishes] = useStore((s) => [s.bears, s.fishes]);

// ✅ 方式 1：useShallow
import { useShallow } from 'zustand/react/shallow';
const { bears, fishes } = useStore(
  useShallow((s) => ({ bears: s.bears, fishes: s.fishes }))
);

// ✅ 方式 2：分别订阅
const bears = useStore((s) => s.bears);
const fishes = useStore((s) => s.fishes);

// ✅ 方式 3：选择器返回原始值
const total = useStore((s) => s.bears + s.fishes);  // number 是原始值

// ❌ 直接修改数组 → 引用不变 → 不触发重渲染
set((state) => {
  state.todos.push(newTodo);
  return state;           // 返回同一个引用！
});

// ❌ 直接修改对象属性
set((state) => {
  state.user.name = 'NewName';
  return { user: state.user };  // user 引用没变！
});

// ✅ 创建新引用
set((state) => ({
  todos: [...state.todos, newTodo],
  user: { ...state.user, name: 'NewName' },
}));

// ✅ 使用 Immer 中间件
import { immer } from 'zustand/middleware/immer';
create(
  immer((set) => ({
    todos: [],
    addTodo: (text) =>
      set((s) => {
        s.todos.push({ text, done: false }); // Immer 下安全
      }),
  }))
);

// ❌ 订阅整个 Store → 任何字段变化都重渲染
function Component() {
  const { bears, fishes } = useStore();
  // ...
}

// ✅ 用选择器精确订阅
function Component() {
  const bears = useStore((s) => s.bears);
  const fishes = useStore((s) => s.fishes);
  // bears 变化时才重渲染，fishes 变化不会触发
}

// ✅ 如果需要多个字段，用 useShallow
function Component() {
  const { bears, fishes } = useStore(
    useShallow((s) => ({ bears: s.bears, fishes: s.fishes }))
  );
}

// ❌ 在组件闭包中捕获 state → 得到的是渲染时刻的快照
function Component() {
  const bears = useStore((s) => s.bears);
  const increase = useStore((s) => s.increase);

  const handleClick = () => {
    // bears 是闭包中的旧值
    if (bears < 10) increase();
  };
}

// ✅ 方式 1：在 action 中用 get() 或 set 回调
const useStore = create((set, get) => ({
  bears: 0,
  increaseIfBelow10: () => {
    if (get().bears < 10) {             // get() 永远是最新的
      set((s) => ({ bears: s.bears + 1 }));
    }
  },
}));

// ✅ 方式 2：在 action 中用 set 的函数式更新
const useStore = create((set) => ({
  bears: 0,
  increaseIfBelow10: () =>
    set((s) => (s.bears < 10 ? { bears: s.bears + 1 } : {})),
}));

// ❌ 问题：首次渲染时 Store 还是初始值，hydration 完成后才更新
// 用户会看到从初始值到持久化值的闪烁

// ✅ 方案 1：skipHydration + 手动控制
const useStore = create(
  persist(
    (set) => ({ theme: 'light', setTheme: (t) => set({ theme: t }) }),
    { name: 'settings', skipHydration: true }
  )
);

function App() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    // 手动触发 hydration
    useStore.persist.rehydrate();
    // 等待完成
    const unsub = useStore.persist.onFinishHydration(() => setReady(true));
    return unsub;
  }, []);

  if (!ready) return <LoadingScreen />;  // hydration 完成后再渲染
  return <MainApp />;
}

// ✅ 方案 2：在 onRehydrateStorage 回调中设置 ready
function useHydrated() {
  const [hydrated, setHydrated] = useState(useStore.persist.hasHydrated());
  useEffect(() => {
    const unsub = useStore.persist.onFinishHydration(() => setHydrated(true));
    return unsub;
  }, []);
  return hydrated;
}

// ❌ 直接修改 Map → 引用不变 → 不触发更新
const useStore = create((set) => ({
  users: new Map(),
  addUser: (user) =>
    set((s) => {
      s.users.set(user.id, user);    // 修改了同一个 Map！
      return { users: s.users };     // 返回旧引用 → 不更新
    }),
}));

// ✅ 创建新 Map
addUser: (user) =>
  set((s) => {
    const next = new Map(s.users);
    next.set(user.id, user);
    return { users: next };
  }),

// ✅ 或用 Immer
import { immer } from 'zustand/middleware/immer';
create(
  immer((set) => ({
    users: new Map(),
    addUser: (user) => set((s) => { s.users.set(user.id, user); }),
  }))
);

// ❌ 所有状态挤在一个 Store 里
const useAppStore = create((set) => ({
  // 用户相关
  user: null, login: () => {}, logout: () => {},
  // 购物车相关
  cart: [], addToCart: () => {}, removeFromCart: () => {},
  // UI 相关
  theme: 'light', sidebarOpen: false, toggleSidebar: () => {},
  // 20+ 个字段和 action...
}));

// ✅ 按功能域拆分多个 Store
// stores/useUserStore.ts
export const useUserStore = create((set) => ({
  user: null, login: () => {}, logout: () => {},
}));

// stores/useCartStore.ts
export const useCartStore = create((set, get) => ({
  items: [], add: () => {}, total: () => {},
}));

// stores/useUIStore.ts
export const useUIStore = create((set) => ({
  theme: 'light', sidebarOpen: false, toggleSidebar: () => {},
}));

// ❌ 在组件中用 subscribe 同步状态 → 手动管理订阅，容易遗漏清理
function Component() {
  const [bears, setBears] = useState(0);
  useEffect(() => {
    const unsub = useStore.subscribe((s) => setBears(s.bears));
    return unsub;
  }, []);
}

// ✅ 直接用选择器 → Zustand 自动管理订阅和清理
function Component() {
  const bears = useStore((s) => s.bears);
}

// ❌ 缺少第一对括号（泛型实例化）
const useStore = create<BearState>(
  persist((set) => ({ ... }))   // TypeScript 报错
);

// ❌ 或不写类型
const useStore = create(
  persist((set) => ({ ... }))   // state 类型为 unknown
);

// ✅ 正确的双重括号写法
const useStore = create<BearState>()(
  persist((set) => ({ ... }))
);

// ❌ v4 默认导入（v5 中不存在）
import create from 'zustand';

// ✅ v5 命名导入
import { create } from 'zustand';

// ❌ v4 从主入口导入 shallow
import { shallow } from 'zustand';

// ✅ v5 从子路径导入
import { shallow } from 'zustand/shallow';

// ❌ v4 从主入口导入 persist/devtools
import { persist, devtools } from 'zustand';

// ✅ v5 从 middleware 路径导入
import { persist, devtools } from 'zustand/middleware';