# xState 反应 ## 你的角色您是使用 React 和 TypeScript 进行基于 xState v5 actor 的状态管理的专家。您了解用于管理复杂应用程序逻辑的状态机、状态图、参与者模型和 React 集成模式。 ## 概述 xState 是适用于 JavaScript 和 TypeScript 应用程序的基于参与者的状态管理和编排解决方案。它使用事件驱动编程、状态机、状态图和参与者模型以可预测、稳健和可视化的方式处理复杂逻辑。 **何时使用 xState：** * 复杂的 UI 流程（多步骤表单、向导、结账流程） * 具有许多转换和边缘情况的状态 * 需要可视化和验证的逻辑 * 具有异步操作和错误处理的进程 * 可以处于多种“模式”的状态（加载、错误、成功、空闲） **何时使用更简单的状态（useState、Zustand）：** * 简单的用户界面切换和计数器 * 表单状态仅限于单个组件 * 没有复杂转换逻辑的状态 * 具有简单加载状态的 CRUD 操作 ## 快速入门创建一个状态机并在 React 组件中使用它： “使用客户端”；从“xstate”导入{createMachine}；从“@xstate/react”导入{useMachine}；常量切换机器 = createMachine({ id：“切换”，初始：“不活动”，状态：{ 不活动：{ 上：{切换：“活动”} }, 活跃：{ 上：{切换：“非活动”} } } }); 函数切换（）{ const [状态，发送] = useMachine(toggleMachine); 返回（）； } ### `useActor` 订阅现有的 Actor（在组件外部创建）：从“xstate”导入{createActor}；从“@xstate/react”导入{useActor}；从“./machines/todoMachine”导入{todoMachine}； // 在组件外部创建参与者（例如，在模块或上下文中） const todoActor = createActor(todoMachine); todoActor.start(); 函数 TodoApp() { const [状态，发送] = useActor(todoActor); 返回（

{todo.text}

）； } ### `useSelector` 通过选择特定状态来优化重新渲染：从“@xstate/react”导入{useSelector}；函数 TodoCount({ actorRef }) { // 仅当 todos.length 改变时重新渲染 const count = useSelector(actorRef, (state) => state.context.todos.length); 返回{count}个待办事项； } 函数 IsLoading({ actorRef }) { // 仅在加载状态改变时重新渲染 const isLoading = useSelector(actorRef, (state) => state.matches("loading")); 返回正在加载？ <旋转器/>：空； } ## TypeScript 模式 ### 使用“types”的打字机使用“types”属性定义上下文和事件：从“xstate”导入{createMachine，分配}；类型 FormContext = { 名称：字符串；电子邮件：字符串；错误：字符串[]； }; 输入表单事件= | { 类型：“UPDATE_NAME”；值：字符串} | { 类型：“UPDATE_EMAIL”；值：字符串} | { 类型：“提交”} | { 类型：“重置”}； const formMachine = createMachine({ 类型：{} 作为 { 上下文：FormContext；事件：表单事件； }, id：“表格”，首字母：“编辑”，上下文：{ 名称：“”，电子邮件：“”，错误：[] }, 状态：{ 编辑：{ 于：{ 更新名称：{ 动作：分配（{ 名称: ({ 事件 }) => 事件.值 }) }, 更新电子邮件：{ 动作：分配（{ 电子邮件：({ event }) => event.value }) }, 提交：“提交” } }, 提交：{ // ... } } }); ### 使用 `setup()` 进行可重用定义以类型安全的方式定义动作、守卫、参与者和延迟：从“xstate”导入{设置，分配}；类型 AuthContext = { 用户 ID: 字符串 |无效的; 重试次数：次数； }; 输入 AuthEvent = | { 类型：“登录”；用户名：字符串；密码：字符串} | { 类型：“注销”} | { 类型：“成功”；用户 ID：字符串 } | { 类型：“失败” }; const authMachine = 设置({ 类型：{} 作为 { 上下文：AuthContext；事件：AuthEvent； }, 行动：{ 设置用户：分配（{ userId: ({ event }) => (event as { userId: string }).userId }), 清除用户：分配（{ 用户ID：空，重试：0 }), 增量重试：分配（{ 重试: ({ context }) => context.retries + 1 }) }, 守卫：{ hasReachedMaxRetries: ({ context }) => context.retries >= 3, isAuthenticated: ({ context }) => context.userId !== null } }).createMachine({ id：“验证”，初始：“注销”，上下文：{ userId：null，重试：0 }，状态：{ 登出：{ 于：{ 登录：“正在验证” } }, 验证：{ 于：{ 成功：{ 目标：“已登录”，操作：“设置用户” }, 失败：[ { 守卫：“hasReachedMaxRetries”，目标：“已注销”，操作：“清除用户” }, { 动作：“增量重试” } ] } }, 登录：{ 于：{ 注销：{ 目标：“已注销”，操作：“清除用户” } } } } }); ## 核心概念 ### 状态和转换状态代表系统可能的模式。转换定义事件如何在状态之间移动：常量机器 = createMachine({ 初始：“空闲”，状态：{ 空闲：{ 上：{ FETCH：“正在加载”} }, 正在加载：{ 于：{ 成功：“成功”，错误：“错误” } }, 成功：{类型：“最终”}，错误：{ 上：{重试：“正在加载”} } } }); ### 上下文上下文保存扩展状态数据：常量机器 = createMachine({ 上下文：{ 计数：0，用户：空 }, // ... }); // 组件中访问 const count = state.context.count; ### 行动操作是即发即忘的副作用：从“xstate”导入{分配}；常量机器 = createMachine({ // ... 状态：{ 活跃：{ 条目：分配（{计数：（{上下文}）=>上下文.计数+1}）， exit: () => console.log("离开活动状态") } } }); ## 最佳实践 ### 做 * 使用“setup()”进行类型安全操作和防护定义 * 使用`useSelector`进行优化状态选择 * 为上下文和事件定义显式类型 * 使用 `state.matches()` 进行分层状态检查 * 保持机器纯净且无副作用（使用动作来实现效果） ### 不要 * 不要将整个快照对象存储在React状态中 * 不要直接改变上下文（使用“分配”） * 不要使用 xState 来实现简单的切换/计数器状态 * 不要忘记处理 UI 中所有可能的状态 ## 客户端组件要求 xState 挂钩必须在客户端组件中使用。添加“使用客户端”指令： “使用客户端”；从“@xstate/react”导入{useMachine}； ## 附加文档要获取包括高级模式在内的全面 xState 文档，请使用 Context7 MCP：使用带有库 ID“/statelyai/xstate”的 Context7 MCP 来获取： - 详细的调用/生成模式 - 并行和历史状态 - 演员沟通 - 测试策略 **请参阅`./references/patterns.md`**了解常见模式，包括异步操作、防护、并行状态和持久性。 ## 快速参考任务|图案 ---|--- **创建机器** | `createMachine({ id, 初始, 状态, 上下文 })` **在组件中使用** | `const [状态，发送] = useMachine(机器)` **检查状态** | `state.matches("loading")` 或 `state.value` **发送事件** | `发送({ 类型: "EVENT_NAME", ...payload })` **阅读上下文** | `state.context.someValue` **更新上下文** | `分配({ key: ({ context, event }) => newValue })` **有条件** | `guard: "guardName"` 或 `guard: ({ context }) => …` **异步操作** | `调用: { src: fromPromise(...), onDone, onError }` **优化选择** | `useSelector(actorRef, (state) => state.context.x)`

Xstate反应

包含技能