useReducer 与状态逻辑抽取

function MessageBoard() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [replyTo, setReplyTo] = useState<string | null>(null);
  const [draft, setDraft] = useState('');

  // 每个事件处理函数都各自决定「状态怎么变」——规则分散在四个地方
  function handleSubmit() {
    if (!draft.trim()) return;
    setMessages((m) => [...m, { id: crypto.randomUUID(), text: draft, replyTo }]);
    setDraft('');
    setReplyTo(null);
  }
  function handleDelete(id: string) {
    setMessages((m) => m.filter((msg) => msg.id !== id));
    if (replyTo === id) setReplyTo(null); // 删除被引用的留言时要联动清理——这条规则藏在角落里
  }
  // ...
}

type MessageState = {
  messages: Message[];
  replyTo: string | null;
  draft: string;
};

type MessageAction =
  | { type: 'submitted' }
  | { type: 'draft_changed'; text: string }
  | { type: 'reply_started'; messageId: string }
  | { type: 'message_deleted'; messageId: string };

function messageReducer(state: MessageState, action: MessageAction): MessageState {
  switch (action.type) {
    case 'submitted': {
      if (!state.draft.trim()) return state; // 校验规则收拢到转移函数里
      return {
        ...state,
        messages: [...state.messages, { id: crypto.randomUUID(), text: state.draft, replyTo: state.replyTo }],
        draft: '',
        replyTo: null, // 发布后取消回复引用——规则只写这一遍
      };
    }
    case 'draft_changed':
      return { ...state, draft: action.text };
    case 'reply_started':
      return { ...state, replyTo: action.messageId };
    case 'message_deleted': {
      return {
        ...state,
        messages: state.messages.filter((msg) => msg.id !== action.messageId),
        replyTo: state.replyTo === action.messageId ? null : state.replyTo,
      };
    }
  }
}

// 反模式：把 UI 动作直接翻译成状态修改指令
dispatch({ type: 'set_draft_and_clear_reply' }); // 这是两个变更的打包，语义不明
dispatch({ type: 'set_message_text', text });     // 「set」是命令式思维

// 推荐：报告业务事件，转移细节交给 reducer
dispatch({ type: 'draft_changed', text });
dispatch({ type: 'submitted' });

type PaletteState = { open: boolean; activeIndex: number; query: string };

type PaletteAction =
  | { type: 'opened' }
  | { type: 'closed' }
  | { type: 'query_changed'; query: string }
  | { type: 'active_moved'; delta: -1 | 1; itemCount: number };

function paletteReducer(state: PaletteState, action: PaletteAction): PaletteState {
  switch (action.type) {
    case 'opened':
      return { ...state, open: true, activeIndex: 0, query: '' }; // 每次打开重置——面板的标准行为
    case 'closed':
      return { ...state, open: false };
    case 'query_changed':
      return { ...state, query: action.query, activeIndex: 0 }; // 换词后回到第一项，否则可能悬在超界索引上
    case 'active_moved': {
      if (action.itemCount === 0) return state;
      const next = (state.activeIndex + action.delta + action.itemCount) % action.itemCount;
      return { ...state, activeIndex: next }; // +itemCount 再取模：负数也能正确循环到末尾
    }
  }
}

type FetchState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; message: string };

type FetchAction<T> =
  | { type: 'started' }
  | { type: 'succeeded'; data: T }
  | { type: 'failed'; message: string };

function fetchReducer<T>(state: FetchState<T>, action: FetchAction<T>): FetchState<T> {
  switch (action.type) {
    case 'started':
      return { status: 'loading' }; // 整体替换而非 spread：切换到 loading 时旧 error/data 一并作废
    case 'succeeded':
      return { status: 'success', data: action.data };
    case 'failed':
      return { status: 'error', message: action.message };
  }
}

// 组件里只负责发起与 dispatch，转移规则全在上面
function IslandComments({ islandId }: { islandId: string }) {
  const [state, dispatch] = useReducer(fetchReducer<Comment[]>, { status: 'idle' });

  useEffect(() => {
    dispatch({ type: 'started' });
    fetch(`/api/islands/${islandId}/comments`)
      .then((res) => (res.ok ? res.json() : Promise.reject(new Error(`HTTP ${res.status}`))))
      .then((data: Comment[]) => dispatch({ type: 'succeeded', data }))
      .catch((err: Error) => dispatch({ type: 'failed', message: err.message }));
  }, [islandId]);

  if (state.status === 'loading') return <CommentSkeleton />;
  if (state.status === 'error') return <p role="alert">加载失败：{state.message}</p>;
  if (state.status === 'idle') return null;
  return <CommentList comments={state.data} />;
}

type CartItem = { productId: string; title: string; price: number; qty: number };
type CartState = { items: CartItem[] };

type CartAction =
  | { type: 'item_added'; product: Omit<CartItem, 'qty'> }
  | { type: 'qty_changed'; productId: string; qty: number }
  | { type: 'item_removed'; productId: string }
  | { type: 'cleared' };

function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case 'item_added': {
      const existing = state.items.find((i) => i.productId === action.product.productId);
      if (!existing) {
        return { ...state, items: [...state.items, { ...action.product, qty: 1 }] };
      }
      // 已存在则加数量而非塞重复行——「合并同类项」规则只在这里出现一次
      return {
        ...state,
        items: state.items.map((i) =>
          i.productId === action.product.productId ? { ...i, qty: i.qty + 1 } : i,
        ),
      };
    }
    case 'qty_changed': {
      if (action.qty <= 0) {
        // 数量归零等同移除——调用方不用自己判断，规则集中在 reducer
        return { ...state, items: state.items.filter((i) => i.productId !== action.productId) };
      }
      return {
        ...state,
        items: state.items.map((i) =>
          i.productId === action.productId ? { ...i, qty: action.qty } : i,
        ),
      };
    }
    case 'item_removed':
      return { ...state, items: state.items.filter((i) => i.productId !== action.productId) };
    case 'cleared':
      return { items: [] };
  }
}

function init(draftFromStorage: string): MessageState {
  const saved = window.localStorage.getItem('fandex-draft');
  return { messages: [], replyTo: null, draft: saved ?? draftFromStorage };
}

function MessageBoard() {
  // init 只在首次渲染执行一次；draftFromStorage 每次 render 都会作为参数传入但被忽略
  const [state, dispatch] = useReducer(messageReducer, '', init);
  // ...
}

const CartStateContext = createContext<CartState | null>(null);
const CartDispatchContext = createContext<React.Dispatch<CartAction> | null>(null);

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });
  return (
    <CartStateContext.Provider value={state}>
      <CartDispatchContext.Provider value={dispatch}>
        {children}
      </CartDispatchContext.Provider>
    </CartStateContext.Provider>
  );
}

export function useCartState() {
  const ctx = useContext(CartStateContext);
  if (!ctx) throw new Error('useCartState 必须在 CartProvider 内使用');
  return ctx;
}

export function useCartDispatch() {
  const ctx = useContext(CartDispatchContext);
  if (!ctx) throw new Error('useCartDispatch 必须在 CartProvider 内使用');
  return ctx;
}