React TypeScript Cheatsheet：useReducer与Discriminated Unions高级用法

想要在React TypeScript项目中实现类型安全的状态管理？useReducer与Discriminated Unions的结合使用是终极解决方案！本指南将带你掌握这种高级模式，让你的应用状态管理更加健壮和可维护。🚀

为什么需要useReducer与Discriminated Unions？

在复杂的React应用中，随着状态逻辑的增长，简单的useState可能无法满足需求。useReducer提供了一种更结构化的状态管理方式，而Discriminated Unions则确保了TypeScript能够精确地推断出每个动作对应的状态变化。

核心优势：

• 完全的类型安全性
• 易于测试的状态逻辑
• 更好的可维护性
• 减少运行时错误

Discriminated Unions基础概念

Discriminated Unions（也称为带标签的联合类型）是TypeScript中的一种高级类型模式。它通过在联合类型的每个成员中添加一个共同的"鉴别器"字段（通常是type），让TypeScript能够进行精确的类型推断。

type UserTextEvent = {
  type: "TextEvent";
  value: string;
  target: HTMLInputElement;
};

type UserMouseEvent = {
  type: "MouseEvent";
  value: [number, number];
  target: HTMLElement;
};

type UserEvent = UserTextEvent | UserMouseEvent;

function handle(event: UserEvent) {
  if (event.type === "TextEvent") {
    // TypeScript知道event.value是string类型
    event.value;
  }
  // 这里event.value是[number, number]类型
}

useReducer与Discriminated Unions实战

让我们看一个实际的计数器示例，展示如何将两者完美结合：

import { useReducer } from "react";

const initialState = { count: 0 };

type ACTIONTYPE =
  | { type: "increment"; payload: number }
  | { type: "decrement"; payload: string };
}

function reducer(state: typeof initialState, action: ACTIONTYPE) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    case "decrement":
      return { count: state.count - Number(action.payload) };
    default:
      throw new Error();
  }
}

类型安全的动作分发

通过Discriminated Unions，TypeScript能够在编译时捕获类型错误：

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement", payload: "5" })}>
        -
      </button>
      <button onClick={() => dispatch({ type: "increment", payload: 5 })}>
        +
      </button>
    </>
  );
}

高级模式：条件渲染与类型守卫

你还可以结合类型守卫函数来实现更复杂的状态管理逻辑：

function isPropsForAnchorElement(
  props: ButtonProps | AnchorProps
): props is AnchorProps {
  return "href" in props;
}

function Clickable(props: ButtonProps | AnchorProps) {
  if (isPropsForAnchorElement(props)) {
    return <a {...props} />;
  } else {
    return <button {...props} />;
  }
}

实际应用场景

表单状态管理

type FormAction =
  | { type: "updateField"; field: string; value: string }
  | { type: "submit" };
}

function formReducer(state: FormState, action: FormAction) {
  // 类型安全的表单处理逻辑
}

异步操作处理

type AsyncAction<T> =
  | { type: "start" }
  | { type: "success"; data: T }
  | { type: "error"; error: string };
}

最佳实践与常见陷阱

✅ 推荐做法

• 为每个动作类型定义明确的type字段
• 使用描述性的动作名称
• 保持reducer函数的纯净性

❌ 避免的陷阱

• 不要使用typeof检查来区分联合类型
• 确保鉴别器字段在所有联合成员中一致

总结

useReducer与Discriminated Unions的结合为React TypeScript应用提供了强大的类型安全状态管理能力。通过本指南，你已经掌握了：

1. Discriminated Unions的核心概念
2. useReducer的高级用法
3. 实际项目中的应用技巧

现在就开始在你的项目中实践这些高级模式，享受类型安全带来的开发效率提升吧！🎯

想要了解更多React TypeScript的高级技巧？查看项目中的docs/advanced/patterns_by_usecase.md和docs/basic/getting-started/hooks.md获取完整文档。