Zustand：轻量状态管理实战

import { createContext, useState, type ReactNode } from "react";

// CartValue = { items: CartItem[]; add: (i: CartItem) => void }（类型略）
const CartContext = createContext<CartValue | null>(null);

function CartProvider({ children }: { children: ReactNode }) {
  const [items, setItems] = useState<CartItem[]>([]);
  // 每次渲染 value 都是新引用，items 一变则全体消费组件陪跑
  const value = { items, add: (i: CartItem) => setItems([...items, i]) };

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
}

import { create } from "zustand";

export interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

interface CartState {
  items: CartItem[];
  add: (item: Omit<CartItem, "quantity">) => void;
  remove: (id: number) => void;
  clear: () => void;
}

export const useCartStore = create<CartState>()((set, get) => ({
  items: [],

  add: (item) => {
    // get：随时读当前最新 state，这里做「最多 20 件」的守卫
    if (get().items.length >= 20) return;

    set((state) => {
      const found = state.items.find((i) => i.id === item.id);
      if (!found) {
        return { items: [...state.items, { ...item, quantity: 1 }] };
      }
      // 不可变更新：map 造出新数组，命中的项换成新对象
      return {
        items: state.items.map((i) =>
          i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
        ),
      };
    });
  },

  remove: (id) =>
    set((state) => ({ items: state.items.filter((i) => i.id !== id) })),

  clear: () => set({ items: [] }),
}));

import { useCartStore } from "./cartStore";

// 导航栏徽章：只订阅「总件数」这一个原始值（派生 selector）
function CartBadge() {
  const count = useCartStore((s) =>
    s.items.reduce((n, i) => n + i.quantity, 0)
  );
  return <span className="badge">{count}</span>;
}

// 购物车页：订阅 items 数组和 remove 函数本身
function CartList() {
  const items = useCartStore((s) => s.items);
  const remove = useCartStore((s) => s.remove);
  return items.map((i) => <CartRow key={i.id} item={i} onRemove={remove} />);
}

import { useCartStore } from "./cartStore";

// 埋点上报：不在 React 树里，没有 Hook 可调
export function reportCartSize() {
  const { items } = useCartStore.getState(); // 直接读当前快照
  track("cart_size", { size: items.length });
}

// 写也一样：路由拦截里直接调 action
export function blockCheckoutIfEmpty() {
  if (useCartStore.getState().items.length === 0) {
    return "/cart"; // 购物车为空，拦回购物车页
  }
  return null;
}

import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";

// CartState 接口与 action 实现同第 2 站，略
export const useCartStore = create<CartState>()(
  devtools(
    persist(
      (set) => ({
        items: [],
        // add / remove / clear 与第 2 站完全一致，略
        clear: () => set({ items: [] }),
      }),
      {
        name: "cart-storage", // localStorage 里的 key，唯一必填项
        // 只挑数据字段持久化：函数不可序列化，UI 临时状态不该跨会话恢复
        partialize: (s) => ({ items: s.items }),
      }
    )
  )
);