Logo
Project Icon

xstate

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

XState状态管理TypeScript状态机事件驱动编程Github开源项目

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

访问官网访问官网GithubGithub文档文档
介绍相关项目


XState 标志
基于 Actor 的复杂应用逻辑状态管理与编排。 → 文档

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

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

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

📖 阅读文档

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

🖥 下载我们的 VS Code 扩展

📑 灵感来自 SCXML 规范

💬 在 Stately Discord 社区 中聊天

✍️ 浏览众多 XState 示例

模板

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

模板

🤖 XState 模板 (CodeSandbox)

在 StackBlitz 中打开
  • XState v5
  • TypeScript
  • 无框架

⚛️ XState + React 模板 (CodeSandbox)

在 StackBlitz 中打开
  • React
  • XState v5
  • TypeScript

💚 XState + Vue 模板 (CodeSandbox)

在 StackBlitz 中打开
  • Vue
  • XState v5
  • TypeScript

🧡 XState + Svelte 模板 (CodeSandbox)

在 StackBlitz 中打开

超快速入门

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 生成和修改状态机
XState Viz

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 的检查工具

有限状态机

代码状态图
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'
代码状态图
 有限状态
在 Stately Studio 中打开

层次（嵌套）状态机

代码状态图
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' }
层次状态
在 Stately Studio 中打开

并行状态机

代码状态图
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'
// }
并行状态
在Stately Studio中打开

历史状态

代码状态图
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' },
// }
历史状态
在Stately Studio中打开

赞助商

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

Transloadit Logo

语义化版本政策

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

破坏性更改

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

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

TypeScript更改

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

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

包

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

相关项目
项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手，通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能，支持100+编程语言，与主流编辑器无缝集成，显著提升开发效率和代码质量。

Project Cover

AI写歌

Suno AI是一个革命性的AI音乐创作平台，能在短短30秒内帮助用户创作出一首完整的歌曲。无论是寻找创作灵感还是需要快速制作音乐，Suno AI都是音乐爱好者和专业人士的理想选择。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案，通过智能技术简化视频制作流程。无论是企业宣传还是个人分享，有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

Kimi

Kimi AI助手提供多语言对话支持，能够阅读和理解用户上传的文件内容，解析网页信息，并结合搜索结果为用户提供详尽的答案。无论是日常咨询还是专业问题，Kimi都能以友好、专业的方式提供帮助。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术，为商家提供一键生成商品图和营销文案的服务，显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台，让商品第一时间被种草。

Project Cover

吐司

探索Tensor.Art平台的独特AI模型，免费访问各种图像生成与AI训练工具，从Stable Diffusion等基础模型开始，轻松实现创新图像生成。体验前沿的AI技术，推动个人和企业的创新发展。

Project Cover

SubCat字幕猫

SubCat字幕猫APP是一款创新的视频播放器，它将改变您观看视频的方式！SubCat结合了先进的人工智能技术，为您提供即时视频字幕翻译，无论是本地视频还是网络流媒体，让您轻松享受各种语言的内容。

Project Cover

美间AI

美间AI创意设计平台，利用前沿AI技术，为设计师和营销人员提供一站式设计解决方案。从智能海报到3D效果图，再到文案生成，美间让创意设计更简单、更高效。

Project Cover

AIWritePaper论文写作

AIWritePaper论文写作是一站式AI论文写作辅助工具，简化了选题、文献检索至论文撰写的整个过程。通过简单设定，平台可快速生成高质量论文大纲和全文，配合图表、参考文献等一应俱全，同时提供开题报告和答辩PPT等增值服务，保障数据安全，有效提升写作效率和论文质量。

使用协议隐私政策广告服务
投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号