作品展示

¥Showcase

这些 XState v4 文档不再维护

XState v5 现已推出！阅读有关 XState v5 的更多信息 (opens new window) 和 查看 XState v5 文档 (opens new window)。

¥XState v5 is out now! Read more about XState v5 (opens new window) and check out the XState v5 docs (opens new window).

有许多开发者和团队使用 XState 在野外 (opens new window) 来帮助控制其应用的各个方面，包括前端和后端以及许多不同的框架（甚至没有框架！）：

¥There are many developers and teams using XState in the wild (opens new window), to help control various aspects of their applications, in the frontend and backend, and in many different frameworks (or even without a framework!):

• Nhost (opens new window) 使用 XState 来管理其 Vanilla、React 和 Vue 库 (opens new window) 的身份验证状态和转换。Nhost 是带有 GraphQL 的开源 Firebase 替代品。

  ¥Nhost (opens new window) uses XState to manage the authentication state and transitions of their Vanilla, React and Vue libraries (opens new window). Nhost is an Open Source Firebase Alternative with GraphQL.

• 亚马逊的 Amplify UI (opens new window) 使用 XState 作为其身份验证器组件 (看这里 (opens new window))

  ¥Amazon's Amplify UI (opens new window) uses XState for its Authenticator component (see here (opens new window))

• Hashicorp Vault 项目 (opens new window) 使用 XState 来控制上下文用户流，以让新用户启动并运行。机器是 在开源存储库中 (opens new window)。

  ¥The Hashicorp Vault project (opens new window) uses XState to control contextual user flows for getting new users up and running. The machines are in the open-source repository (opens new window).

• 服务工作游戏 (opens new window) 有很多级别，其流量由 XState 控制。

  ¥The Service Workies game (opens new window) has many levels whose flows are controlled by XState.

  • https://twitter.com/geddski/status/1090404900318502912 (opens new window)

• “在 bridge21.com (opens new window)，我们正在使用 XState 3 和 React-automata 重写我们的网站。这是一个游戏规则的改变者。

  ¥"At bridge21.com (opens new window) we are re-writing our site using XState 3 and react-automata. It's a game changer.

• KongHQ (opens new window) 将其“...部署到 Kong 的生产中以处理表单状态（错误、加载、模态、获取机器等）在我们的 Vue 应用中 (opens new window)”

  ¥KongHQ (opens new window) has it "...deployed to production in Kong to handle form states (error, loading, modal, fetch machines etc.) in our Vue app (opens new window)"

• “在 4D 健康软件 (opens new window) 的前端应用中广泛使用 XState 4。

  ¥"Using XState 4 extensively in 4D Healthware (opens new window)'s frontend app.

• “我们在 React Native 应用中使用 XState at Meru 健康 (opens new window) 来管理许多交互。

  ¥"We are using XState at Meru Health (opens new window) in our React Native app for managing many interactions.

  • 还有相关的 在 React Helsinki 上介绍使用 XState (opens new window)

    ¥There is also a relevant presentation of using XState at React Helsinki (opens new window)

• “我在皇家泰瑞尔博物馆（加拿大艾伯塔省）的可触摸应用中使用了 XState，并在本文中记录了其使用情况："使用状态图对屏幕保护程序进行建模，这是一个真实的用例" (opens new window)."

  ¥"I used XState in a touchable app for the Royal Tyrrell Museum (Alberta - Canada) and documented its use in this article: "Modeling a Screensaver with a Statechart, a real use case" (opens new window)."

• “使用 XState 来导航桶分析网络应用 BinaryBeer (opens new window)。”

  ¥"Used XState for the navigation of a keg analytics web-app BinaryBeer (opens new window)."

• “使用 XState 对产品集合的数据获取和过滤进行建模 👉 stimm.com (opens new window)”

  ¥"Used XState to model data fetching and filtering of a collection of products 👉 stimm.com (opens new window)"

• “我们现在使用 xstate 为我在 Maritz (opens new window) 的行为洞察引擎中的一些更复杂的交互提供支持。

  ¥"We're now using xstate to power a couple of the more complicated interactions at my place in our Behavior Insights Engine at Maritz (opens new window).

• 在 Cypress (opens new window)，我们选择 XState 来管理我们的开源 现实世界的应用 (opens new window) 的状态。该应用是一款支付应用，用于演示赛普拉斯测试方法、模式和工作流程的实际使用情况。机器 (opens new window) 用于现代响应式 Web 应用中存在的几种不同类型的场景。

  ¥At Cypress (opens new window) we chose XState to manage state for our open source Real World App (opens new window). The app is a payment application used to demonstrate real-world usage of Cypress testing methods, patterns, and workflows. The machines (opens new window) are used for several different types of scenarios present in modern, responsive web applications.

• "我们在项目后端使用 XState 来控制实体状态" (https://www.linkedin.com/in/haltentech-team (opens new window))

  ¥"We use XState at the backend in projects to control entity state" (https://www.linkedin.com/in/haltentech-team (opens new window))

• 向日葵乐园 (opens new window) 是一款去中心化且社区驱动的 MetaVerse 风格游戏，它使用 XState 通过状态机方法来控制和管理用户和会话。(看这里 (opens new window))

  ¥Sunflower Land (opens new window), a decentralized and community driven MetaVerse style game, uses XState to control and manage the user and session using a State Machine approach. (see here (opens new window))

• “我使用 XState 创建了经典河内塔益智游戏的（开源）版本。使用两个状态机，一个用于屏幕交互逻辑，另一个用于游戏交互逻辑。还包括使用基于模型的测试工具自动生成测试。”河内塔应用 (opens new window)

  ¥"I used XState to create an (open source) version of the classic Tower of Hanoi puzzle game. Two state machines are used, one for screen interaction logic and the other for game interaction logic. Also includes automated test generation with model based testing tools." Tower of Hanoi app (opens new window)

• “XState 彻底改变了我对全栈应用复杂逻辑编程的看法 - YouTube 总结 (opens new window) 上流式摘要的所有核心逻辑现在都封装在前端和后端的 XState 机中。可视化编辑器可以轻松发现应该处理的边缘情况和错误状态，从而形成一个非常强大和稳定的系统。”

  ¥"XState completely changed how I think about programming complex logic for fullstack applications - all core logic for streaming summaries on YouTube Summarized (opens new window) is now encapsulated in XState machines both on the frontend and backend. The visual editor makes it easy to spot edge cases and error states that should be handled, resulting in a very robust and stable system."