xstate

xstate

基于状态机的JavaScript应用逻辑管理库

XState是一个JavaScript和TypeScript应用状态管理库,基于状态机、状态图和Actor模型设计。它采用事件驱动编程理念,为开发者提供可预测、健壮且可视化的方式处理复杂应用逻辑。XState适用于前端和后端开发,无需额外依赖,可与React、Vue等主流框架无缝集成。配套的Stately Studio工具支持图形化设计和编辑状态机,进一步简化开发流程。

XState状态管理TypeScript状态机事件驱动编程Github开源项目
<p align="center"> <br /> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/statelyai/public-assets/main/logos/xstate-logo-white-nobg.svg"> <img alt="XState 标志" src="https://yellow-cdn.veclightyear.com/2b54e442/afa8b93c-1a30-4acb-95f1-15b02a4b6e18.svg" width="200"> </picture> <br /> <strong>基于 Actor 的复杂应用逻辑状态管理与编排。</strong> <a href="https://stately.ai/docs">→ 文档</a> <br /> <br /> </p>

XState 是一个用于 JavaScript 和 TypeScript 应用的状态管理和编排解决方案。它没有任何依赖,适用于前端和后端应用逻辑。

它使用事件驱动编程、状态机、状态图和 Actor 模型以可预测、稳健和可视化的方式处理复杂逻辑。XState 通过允许开发者将逻辑建模为 Actor 和状态机,提供了一种强大而灵活的方式来管理应用程序和工作流状态。

✨ 在 Stately Studio 中可视化创建状态机 → state.new


📖 阅读文档

➡️ 使用 Stately 编辑器创建状态机

🖥 下载我们的 VS Code 扩展

📑 灵感来自 SCXML 规范

💬 在 Stately Discord 社区 中聊天

✍️ 浏览众多 XState 示例

模板

通过在 CodeSandbox 上 fork 以下模板之一开始:

<table> <thead> <tr><th>模板</th><th></th></tr> </thead> <tbody> <tr> <td>

🤖 XState 模板 (CodeSandbox)

在 StackBlitz 中打开

</td> <td>
  • XState v5
  • TypeScript
  • 无框架
</td> </tr> <tr> <td>

⚛️ XState + React 模板 (CodeSandbox)

在 StackBlitz 中打开

</td> <td>
  • React
  • XState v5
  • TypeScript
</td> </tr> <tr> <td>

💚 XState + Vue 模板 (CodeSandbox)

在 StackBlitz 中打开

</td> <td>
  • Vue
  • XState v5
  • TypeScript
</td> </tr> <tr> <td>

🧡 XState + Svelte 模板 (CodeSandbox)

在 StackBlitz 中打开

</td> <td> </td> </tr> </tbody> </table>

超快速入门

npm install xstate
import { createMachine, createActor, assign } from 'xstate'; // 状态机 const toggleMachine = createMachine({ id: 'toggle', initial: 'inactive', context: { count: 0 }, states: { inactive: { on: { TOGGLE: { target: 'active' } } }, active: { entry: assign({ count: ({ context }) => context.count + 1 }), on: { TOGGLE: { target: 'inactive' } } } } }); // Actor(机器逻辑的实例,类似于 store) const toggleActor = createActor(toggleMachine); toggleActor.subscribe((state) => console.log(state.value, state.context)); toggleActor.start(); // => 输出 'inactive', { count: 0 } toggleActor.send({ type: 'TOGGLE' }); // => 输出 'active', { count: 1 } toggleActor.send({ type: 'TOGGLE' }); // => 输出 'inactive', { count: 1 }

Stately Studio

  • 可视化创建、编辑和协作状态机
  • 导出为多种格式,包括 XState v5
  • 自动生成测试路径和文档
  • 部署到 Stately Sky
  • 使用 Stately AI 生成和修改状态机
<a href="stately.ai/registry/new?ref=github" title="Stately Studio"> <img src="https://github.com/statelyai/xstate/assets/1093738/74ed9cbc-b824-4ed7-a16d-f104947af8a7" alt="XState Viz" width="800" /> </a>

state.new

为什么使用?

状态图是一种用于建模有状态、响应式系统的形式化方法。这对于以声明式方式描述应用程序的行为非常有用,从单个组件到整体应用逻辑。

阅读 📽 幻灯片🎥 视频)或查看以下资源,了解有限状态机和状态图在用户界面中的重要性:

描述
🤖 xstate核心有限状态机和状态图库 + 解释器
📉 @xstate/graph使用 XState 的图遍历和基于模型的测试工具
⚛️ @xstate/react在 React 应用中使用 XState 的 React hooks 和工具
💚 @xstate/vue在 Vue 应用中使用 XState 的 Vue 组合函数和工具
🎷 @xstate/svelte在 Svelte 应用中使用 XState 的 Svelte 工具
🥏 @xstate/solid在 Solid 应用中使用 XState 的 Solid hooks 和工具
🔍 @statelyai/inspectXState 的检查工具

有限状态机

<table> <thead><tr><th>代码</th><th>状态图</th></tr></thead> <tbody> <tr> <td>
import { createMachine, createActor } from 'xstate'; const lightMachine = createMachine({ id: 'light', initial: 'green', states: { green: { on: { TIMER: 'yellow' } }, yellow: { on: { TIMER: 'red' } }, red: { on: { TIMER: 'green' } } } }); const actor = createActor(lightMachine); actor.subscribe((state) => { console.log(state.value); }); actor.start(); // 输出 'green' actor.send({ type: 'TIMER' }); // 输出 'yellow'
<table> <thead><tr><th>代码</th><th>状态图</th></tr></thead> <tbody> <tr> <td> </td> <td> </td> </tr> </tbody> </table> </td> <td> <a href="https://stately.ai/registry/editor/fa443471-b416-4014-8e6f-12417863e4d4?mode=design&machineId=27e86036-f2f7-40f1-9d1e-66ce6e1accc0" title="有限状态"> <img src="https://github.com/statelyai/xstate/assets/1093738/36d4b6b5-e3d0-4c19-9f41-2e3425ceac88" alt="有限状态" width="400" /> <br /> 在 Stately Studio 中打开 </a> <br /> </td> </tbody> </table>

层次(嵌套)状态机

<table> <thead><tr><th>代码</th><th>状态图</th></tr></thead> <tbody> <tr> <td>
import { createMachine, createActor } from 'xstate'; const pedestrianStates = { initial: 'walk', states: { walk: { on: { PED_TIMER: 'wait' } }, wait: { on: { PED_TIMER: 'stop' } }, stop: {} } }; const lightMachine = createMachine({ id: 'light', initial: 'green', states: { green: { on: { TIMER: 'yellow' } }, yellow: { on: { TIMER: 'red' } }, red: { on: { TIMER: 'green' }, ...pedestrianStates } } }); const actor = createActor(lightMachine); actor.subscribe((state) => { console.log(state.value); }); actor.start(); // 输出 'green' actor.send({ type: 'TIMER' }); // 输出 'yellow' actor.send({ type: 'TIMER' }); // 输出 { red: 'walk' } actor.send({ type: 'PED_TIMER' }); // 输出 { red: 'wait' }
</td> <td> <a href="https://stately.ai/registry/editor/fa443471-b416-4014-8e6f-12417863e4d4?mode=design&machineId=30dffcdd-16c2-49e2-bfc6-a674057cb271" title="层次状态"> <img src="https://github.com/statelyai/xstate/assets/1093738/32b0692b-1c29-4469-b5e3-03146e3ef249" alt="层次状态" width="400" /> <br /> 在 Stately Studio 中打开 </a> <br /> </td> </tr> </tbody> </table>

并行状态机

<table> <thead><tr><th>代码</th><th>状态图</th></tr></thead> <tbody> <tr> <td>
import { createMachine, createActor } from 'xstate'; const wordMachine = createMachine({ id: 'word', type: 'parallel', states: { bold: { initial: 'off', states: { on: { on: { TOGGLE_BOLD: 'off' } }, off: { on: { TOGGLE_BOLD: 'on' } } } }, underline: { initial: 'off', states: { on: { on: { TOGGLE_UNDERLINE: 'off' } }, off: { on: { TOGGLE_UNDERLINE: 'on' } } } }, italics: { initial: 'off', states: { on: { on: { TOGGLE_ITALICS: 'off' } }, off: { on: { TOGGLE_ITALICS: 'on' } } } }, list: { initial: 'none', states: { none: { on: { BULLETS: 'bullets', NUMBERS: 'numbers' } }, bullets: { on: { NONE: 'none', NUMBERS: 'numbers' } }, numbers: { on: { BULLETS: 'bullets', NONE: 'none' } } } } } }); const actor = createActor(wordMachine); actor.subscribe((state) => { console.log(state.value); }); actor.start(); // 日志输出 { // bold: 'off', // italics: 'off', // underline: 'off', // list: 'none' // } actor.send({ type: 'TOGGLE_BOLD' }); // 日志输出 { // bold: 'on', // italics: 'off', // underline: 'off', // list: 'none' // } actor.send({ type: 'TOGGLE_ITALICS' }); // 日志输出 { // bold: 'on', // italics: 'on', // underline: 'off', // list: 'none' // }
</td> <td> <a href="https://stately.ai/registry/editor/fa443471-b416-4014-8e6f-12417863e4d4?mode=design&machineId=980f50d8-e1ff-4441-8c8b-afe41c1610f2" title="并行状态"> <img src="https://github.com/statelyai/xstate/assets/1093738/3b1989c0-f4a9-4653-baf2-4df3a40e91a6" alt="并行状态" width="400" /> <br /> 在Stately Studio中打开 </a> </td> </tr> </tbody> </table>

历史状态

<table> <thead><tr><th>代码</th><th>状态图</th></tr></thead> <tbody> <tr> <td>
import { createMachine, createActor } from 'xstate'; const paymentMachine = createMachine({ id: 'payment', initial: 'method', states: { method: { initial: 'cash', states: { cash: { on: { SWITCH_CHECK: 'check' } }, check: { on: { SWITCH_CASH: 'cash' } }, hist: { type: 'history' } }, on: { NEXT: 'review' } }, review: { on: { PREVIOUS: 'method.hist' } } } }); const actor = createActor(paymentMachine); actor.subscribe((state) => { console.log(state.value); }); actor.start(); // 日志输出 { // value: { method: 'cash' }, // } actor.send({ type: 'SWITCH_CHECK' }); // 日志输出 { // value: { method: 'check' }, // } actor.send({ type: 'NEXT' }); // 日志输出 { // value: 'review', // } actor.send({ type: 'PREVIOUS' }); // 日志输出 { // value: { method: 'check' }, // }
</td> <td> <a href="https://stately.ai/registry/editor/fa443471-b416-4014-8e6f-12417863e4d4?mode=design&machineId=d1a9bb95-db97-4af3-b38b-71b005c643d3" title="历史状态"> <img src="https://github.com/statelyai/xstate/assets/1093738/1be5c495-d560-4660-94f2-5341efbf7128" alt="历史状态" width="400" /> <br /> 在Stately Studio中打开 </a> </td> </tr> </tbody> </table>

赞助商

特别感谢支持这个开源项目的赞助商:

<img src="https://yellow-cdn.veclightyear.com/2b54e442/ae2153c3-5ff9-4c83-988b-e59ccf3d40b7.svg?label=sponsors&color=brightgreen" /> <a href="https://transloadit.com/?utm_source=xstate&utm_medium=referral&utm_campaign=sponsorship&utm_content=github"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://assets.transloadit.com/assets/images/sponsorships/logo-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://yellow-cdn.veclightyear.com/2b54e442/3ffb4063-6ded-4268-b0d9-d67a7b751e70.svg"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/3ffb4063-6ded-4268-b0d9-d67a7b751e70.svg" alt="Transloadit Logo"> </picture> </a>

语义化版本政策

我们理解公共契约的重要性,并且不打算在次要或补丁版本中发布任何对运行时API的破坏性更改。我们在对XState库进行任何更改时都会考虑这一点,并努力最小化这些更改对现有用户的影响。

破坏性更改

XState自身执行大量用户逻辑。因此,几乎任何行为的改变都可能被视为破坏性更改。我们认识到这是一个潜在的问题,但认为将每个更改都视为破坏性更改是不切实际的。我们尽最大努力谨慎地实现新功能,使我们的用户能够以更好、更安全的方式实现他们的逻辑。

任何更改_都可能_影响现有XState机器的行为,如果这些机器使用特定配置的话。我们不会随意引入行为变化,并且我们的目标是避免做出影响大多数现有机器的更改。但我们保留在次要版本中做出_某些_行为更改的权利。这样的更改将始终由我们对情况的最佳判断来决定。在决定升级之前,请务必阅读我们的发布说明。

TypeScript更改

我们还保留类似的权利,可以在次要版本中调整声明的TypeScript定义或放弃对旧版TypeScript的支持。TypeScript语言本身发展迅速,并且经常在其次要版本中引入破坏性更改。我们的团队也在不断学习如何更有效地利用TypeScript - 因此类型定义也在不断改进。

由于这些原因,我们的团队不可能受制于在TypeScript旧版本是最新版本时做出的决定,或者当我们不知道如何更好地声明我们的类型时做出的决定。我们不会经常引入声明更改 - 但与运行时更改相比,我们更有可能这样做。

XState系列中的大多数包都声明了对XState本身的对等依赖。在发布XState的新版本时,我们会谨慎地维护与已发布包的兼容性,但是依赖于XState的包的每次发布都会调整声明的对等依赖范围以包含XState的最新版本。例如,您应该始终能够更新xstate而无需更新@xstate/react。但是当您更新@xstate/react时,我们强烈建议也更新xstate

编辑推荐精选

蛙蛙写作

蛙蛙写作

AI小说写作助手,一站式润色、改写、扩写

蛙蛙写作—国内先进的AI写作平台,涵盖小说、学术、社交媒体等多场景。提供续写、改写、润色等功能,助力创作者高效优化写作流程。界面简洁,功能全面,适合各类写作者提升内容品质和工作效率。

AI辅助写作AI工具蛙蛙写作AI写作工具学术助手办公助手营销助手AI助手
Trae

Trae

字节跳动发布的AI编程神器IDE

Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
问小白

问小白

全能AI智能助手,随时解答生活与工作的多样问题

问小白,由元石科技研发的AI智能助手,快速准确地解答各种生活和工作问题,包括但不限于搜索、规划和社交互动,帮助用户在日常生活中提高效率,轻松管理个人事务。

热门AI助手AI对话AI工具聊天机器人
Transly

Transly

实时语音翻译/同声传译工具

Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手,它拥有超精准的音频识别翻译能力,几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球,无论你是留学生、商务人士、韩剧美剧爱好者,还是出国游玩、多国会议、跨国追星等等,都可以满足你所有需要同传的场景需求,线上线下通用,扫除语言障碍,让全世界的语言交流不再有国界。

讯飞智文

讯飞智文

一键生成PPT和Word,让学习生活更轻松

讯飞智文是一个利用 AI 技术的项目,能够帮助用户生成 PPT 以及各类文档。无论是商业领域的市场分析报告、年度目标制定,还是学生群体的职业生涯规划、实习避坑指南,亦或是活动策划、旅游攻略等内容,它都能提供支持,帮助用户精准表达,轻松呈现各种信息。

AI办公办公工具AI工具讯飞智文AI在线生成PPTAI撰写助手多语种文档生成AI自动配图热门
讯飞星火

讯飞星火

深度推理能力全新升级,全面对标OpenAI o1

科大讯飞的星火大模型,支持语言理解、知识问答和文本创作等多功能,适用于多种文件和业务场景,提升办公和日常生活的效率。讯飞星火是一个提供丰富智能服务的平台,涵盖科技资讯、图像创作、写作辅助、编程解答、科研文献解读等功能,能为不同需求的用户提供便捷高效的帮助,助力用户轻松获取信息、解决问题,满足多样化使用场景。

热门AI开发模型训练AI工具讯飞星火大模型智能问答内容创作多语种支持智慧生活
Spark-TTS

Spark-TTS

一种基于大语言模型的高效单流解耦语音令牌文本到语音合成模型

Spark-TTS 是一个基于 PyTorch 的开源文本到语音合成项目,由多个知名机构联合参与。该项目提供了高效的 LLM(大语言模型)驱动的语音合成方案,支持语音克隆和语音创建功能,可通过命令行界面(CLI)和 Web UI 两种方式使用。用户可以根据需求调整语音的性别、音高、速度等参数,生成高质量的语音。该项目适用于多种场景,如有声读物制作、智能语音助手开发等。

咔片PPT

咔片PPT

AI助力,做PPT更简单!

咔片是一款轻量化在线演示设计工具,借助 AI 技术,实现从内容生成到智能设计的一站式 PPT 制作服务。支持多种文档格式导入生成 PPT,提供海量模板、智能美化、素材替换等功能,适用于销售、教师、学生等各类人群,能高效制作出高品质 PPT,满足不同场景演示需求。

讯飞绘文

讯飞绘文

选题、配图、成文,一站式创作,让内容运营更高效

讯飞绘文,一个AI集成平台,支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容,加速品牌传播,提升内容营销效果。

热门AI辅助写作AI工具讯飞绘文内容运营AI创作个性化文章多平台分发AI助手
材料星

材料星

专业的AI公文写作平台,公文写作神器

AI 材料星,专业的 AI 公文写作辅助平台,为体制内工作人员提供高效的公文写作解决方案。拥有海量公文文库、9 大核心 AI 功能,支持 30 + 文稿类型生成,助力快速完成领导讲话、工作总结、述职报告等材料,提升办公效率,是体制打工人的得力写作神器。

下拉加载更多