状态管理生态

import { create } from "zustand";
 
type CartState = {
  items: CartItem[];
  add: (item: CartItem) => void;
  remove: (id: string) => void;
  clear: () => void;
};
 
export const useCart = create<CartState>((set, get) => ({
  items: [],
 
  add: (item) =>
    set((s) => {
      const existing = s.items.find((i) => i.id === item.id);
      if (existing) {
        return {
          items: s.items.map((i) =>
            i.id === item.id ? { ...i, qty: i.qty + item.qty } : i
          ),
        };
      }
      return { items: [...s.items, item] };
    }),
 
  remove: (id) => set((s) => ({ items: s.items.filter((i) => i.id !== id) })),
 
  clear: () => set({ items: [] }),
}));

function CartBadge() {
  // 选择器：只订阅 items.length，其他字段变化不会导致重渲染
  const count = useCart((s) => s.items.length);
  return <span>{count}</span>;
}
 
function AddButton({ product }: Props) {
  // 只取 action，引用永远不变，这个组件永远不会因为购物车变化而重渲染
  const add = useCart((s) => s.add);
  return <button onClick={() => add(toCartItem(product))}>加入购物车</button>;
}

import { persist, devtools, subscribeWithSelector } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
 
export const useSettings = create<State>()(
  devtools(
    persist(
      immer((set) => ({
        theme: "light",
        // 有了 immer，可以「直接修改」
        toggleTheme: () =>
          set((s) => {
            s.theme = s.theme === "light" ? "dark" : "light";
          }),
      })),
      { name: "settings", partialize: (s) => ({ theme: s.theme }) }
    )
  )
);

// 错误：每次都返回新对象，浅比较失败
const { a, b } = useStore((s) => ({ a: s.a, b: s.b }));
 
// 正确一：分开取
const a = useStore((s) => s.a);
const b = useStore((s) => s.b);
 
// 正确二：用 useShallow
import { useShallow } from "zustand/react/shallow";
const { a, b } = useStore(useShallow((s) => ({ a: s.a, b: s.b })));

import { createSlice, configureStore, type PayloadAction } from "@reduxjs/toolkit";
 
const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [] as CartItem[] },
  reducers: {
    // 内置 Immer，可以写成「直接修改」的样子
    added(state, action: PayloadAction<CartItem>) {
      const existing = state.items.find((i) => i.id === action.payload.id);
      if (existing) existing.qty += action.payload.qty;
      else state.items.push(action.payload);
    },
    removed(state, action: PayloadAction<string>) {
      state.items = state.items.filter((i) => i.id !== action.payload);
    },
  },
});
 
export const { added, removed } = cartSlice.actions;
 
export const store = configureStore({
  reducer: { cart: cartSlice.reducer },
});
 
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

function CartBadge() {
  const count = useSelector((s: RootState) => s.cart.items.length);
  return <span>{count}</span>;
}
 
function AddButton({ product }: Props) {
  const dispatch = useDispatch<AppDispatch>();
  return <button onClick={() => dispatch(added(toCartItem(product)))}>加入</button>;
}

import { atom, useAtom, useAtomValue } from "jotai";
 
// 基础原子
const countAtom = atom(0);
const stepAtom = atom(1);
 
// 派生原子：自动追踪依赖，依赖变了才重算
const doubledAtom = atom((get) => get(countAtom) * 2);
 
// 可写的派生原子
const incrementAtom = atom(null, (get, set) => {
  set(countAtom, get(countAtom) + get(stepAtom));
});
 
// 异步原子
const userAtom = atom(async (get) => {
  const id = get(userIdAtom);
  const res = await fetch("/api/users/" + id);
  return res.json();
});

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const doubled = useAtomValue(doubledAtom);   // 只读
  return <button onClick={() => setCount(count + 1)}>{count} / {doubled}</button>;
}

// Zustand
const useStore = create<S>((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 })),
}));
const count = useStore((s) => s.count);
const isEven = useStore((s) => s.count % 2 === 0);   // 选择器里算
 
// Redux Toolkit
const slice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: { inc: (s) => { s.count += 1; } },
});
const count = useSelector((s: RootState) => s.counter.count);
const isEven = useSelector((s: RootState) => s.counter.count % 2 === 0);
 
// Jotai
const countAtom = atom(0);
const isEvenAtom = atom((get) => get(countAtom) % 2 === 0);   // 派生原子
const [count, setCount] = useAtom(countAtom);
const isEven = useAtomValue(isEvenAtom);

src/stores/
├── cart.ts          购物车
├── auth.ts          登录态
├── ui.ts            全局 UI（侧边栏折叠、主题）
└── notifications.ts 通知队列

// 好：逻辑内聚在 store，组件只调用
const useCart = create<S>((set, get) => ({
  items: [],
  addWithStock: async (id: string) => {
    const stock = await api.checkStock(id);
    if (stock <= 0) throw new Error("库存不足");
    set((s) => ({ items: [...s.items, { id, qty: 1 }] }));
  },
}));
 
// 不好：组件里拼装逻辑
const items = useCart((s) => s.items);
const setItems = useCart((s) => s.setItems);
// 然后在组件里写一堆业务判断