问题标签 [xstate]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
283 浏览

node.js - AWS lambda 实例在 xstate 调用承诺时关闭

我有一个 lambda 函数,它使用 xstate 顺序执行某些任务,其中一个步骤是将数据保存到 dynamo db。但是,只要执行以下行,我的 lambda 就会结束执行。

我的代码:

0 投票
1 回答
89 浏览

xstate - 使用 xstate 进行语言验证

我有以下状态图,用于验证字符串是否与格式匹配。 状态图

我想在 xstate 中重新创建与 fsm 匹配的这种语言。机器应该为,等返回true,否则返回false。它应该具有与正则表达式完全相同的输出acabcabbbbbcstring.match(/^ab*c$/) !== null;

我目前有以下内容:

有没有办法通过动作和上下文来检查一个字符串是否与这种语言 fsm 匹配,直到它达到最终状态。

当然,我可以只使用正则表达式,但为了这个问题,我已经简化了问题。我要解析的实际语言不规则,需要 pda / 上下文。我只想知道使用 xstate 进行语言/字符串解析的结构。

0 投票
1 回答
114 浏览

firebase - 我如何强制一个可观察的完成?

有点小众的问题,但我知道问题是什么,所以希望这里有人可以帮助我。这是 Observable/RXFire 问题,而不是 xstate 问题。

我有这台机器调用一个可观察的:

它应该工作的方式是机器在加载时调用 observable,然后一旦 obs 完成发出其值并调用 complete(),invoke.onDone 被调用并且机器转换到“加载”状态。

当我使用通过 complete() 调用创建的普通 observable 时,或者当我将 take(#) 添加到 .pipe() 的末尾时,转换工作。

但由于某种原因,来自 RXFire 的 collectionData() 的可观察数据没有发出“完整”信号……机器就坐在那里。

我尝试在末尾添加一个 empty() 并 concat() 对 observables 添加一个完整的信号到管道的末尾......但后来我发现 empty() 已被弃用并且它没有似乎无论如何都可以工作。

有一段时间我的头撞在墙上。任何帮助表示赞赏。


编辑:

解决方案:

我误解了 collectionData() 的目的。它是一个监听器,所以它不应该完成。我在圆孔里放了一个方钉。解决方案是重构 xstate 机器,所以我根本不需要调用 onDone。

尽管如此,还是感谢您的回答。


EDIT2:让它工作。

take(1) 可以在 concatAll() 之前调用。我想如果你先调用它,它会结束流,但事实并非如此。管道中的其他运算符仍然适用。所以我采取(1) 来获取单个数组,使用 concatAll() 将数组展平为单个对象的流,然后将该数据映射到触发 STORE 操作的新对象。然后 store 操作将数据设置为机器的上下文。

感谢大家的帮助!

0 投票
1 回答
3077 浏览

typescript - 如何在 XState 机器中执行操作 send('EVENT_NAME', {to:'something from context'})?

我需要将事件发送到另一个生成的状态机,它的 ID 作为字符串在上下文中的变量中。(它不是父状态机,也不是子状态机)

喜欢

context.sendTo = 'B_id'

如何处理send()上下文中的参数?

以及如何放入send('MY_EVENT_NAME', {to: <something from context> })MachineOptions actions部分?

附言

就像 在 xState 中将事件从一台机器发送到另一台机器时的 Pass 值一样

但我需要动态的不是消息正文,而是to:部分

0 投票
0 回答
513 浏览

javascript - 从 Xstate 的服务中清理和停止生成的 Actor

我已经广泛阅读了文档,但是仍有一些部分不完全清楚,并且大多数与演员/服务有关

我对生成的演员生命周期的细节有点模糊。

  • 使用生成的演员调用.stop()服务也会.stop()生成演员还是被挂起?
  • 我应该如何从机器中清除生成的演员?有没有办法children从服务本身内部访问生成的演员?(比如从动作内部)

假设我有一台带有添加文件操作的机器。添加文件时spawn(),会为其调用一个新文件,并将引用存储到context. 现在,当机器完成它正在做的任何事情时,我想重置context并清除每一个children之后的内容。.stop()

在这里要完全具体的是我如何对实现上述行为的上传系统进行建模。

在这个实现中,每当机器返回idle状态时,我都会重置context并手动设置.stop()每个生成的actor。但是,actor 服务仍然在 中徘徊,.children我无法从机器操作内部访问它们(将第三个参数添加meta到 theresetContext不会导致任何可以访问 current 的东西children)。

关于.stop()演员并清除children和重置context,理想情况下,我希望每个动作都有一个单独的动作,在idle进入状态时运行,但是由于我似乎无法找到访问方法children,因此通过一个动作完成所有操作这context是我能想到的唯一解决方案。

另外,值得注意的是,在删除待办事项的官方示例.stop()中,它生成的演员没有被编辑,这让我想知道这是疏忽还是有原因?

下面,为方便起见,是实现上传系统和文件的代码。完整的实现,也包括 vizualizer,可以在这里找到:

0 投票
1 回答
719 浏览

javascript - 使用 xstate,是否可以配置一个适用于所有状态并在所有状态和子状态中以相同方式处理的事件?

我是 xstate 的新手,我正在尝试在应用程序中使用它,用户可以根据父状态和/或子状态在应用程序中请求不同的东西。但是,无论应用程序处于什么状态/子状态,用户都应该能够提出一些请求。对这些事件的响应是相同的,无论之前的状态是什么。如何配置此事件,以便不必在所有状态/子状态下重复定义它?

0 投票
1 回答
161 浏览

javascript - 我刚刚编写了我的第一个应用程序,由 xstate 提供支持,我喜欢可视化工具。如何以编程方式生成图表?

当我使用可视化工具生成那些有用的图表时,我一直不得不删除我所有的变量引用和其他零碎的东西。我想知道是否有办法让我以编程方式生成它们?

是否有打字稿兼容甚至非打字稿方法来做到这一点?

0 投票
1 回答
52 浏览

javascript - xState 中的模型输入(文本字段)状态机

希望阅读您对如何使用 xState 对输入(文本字段)建模的想法。

根据输入 ux 文章,文本字段可能具有以下状态:

输入文本字段可以具有以下状态之一:默认、聚焦、错误和禁用。所有的州都应该被清楚地区分开来。

这是有道理的,因为其他库(如 Material UI)使用或多或少相同的状态。

我想知道如何建模。

让我简单地写一些想法:

  • 我认为很明显该值应该是 xState 上下文的一部分,因为它可以具有任何值
  • 提到的状态也很有意义

现在我不太确定的部分:假设我们有一个内联验证(onChange),它表示文本字段的值是好的,为此我们设置想要使用 css 设置一个类“有效”,它为文本字段提供绿色边框。

  • 我们需要从defaultto的状态转换default_valid(不仅仅是valid因为我们仍处于默认状态)......这同样适用于default_invalid......以及更多可能以状态爆炸结束的组合。

  • 在 xState 中将其建模为子状态并通过default.validor访问它default.invalid...

在这两种情况下,我们都需要在文本字段组件中使用另一个映射,其内容类似于

(只是伪代码)

我真的不喜欢这种在 xState 机器中管理组件状态和时间的方法。这对我来说似乎是错误的。

我宁愿只使用输入机器的状态……这对于某些默认值(例如,,……)效果很好,default但是focused一旦该字段“处于 2 个或更多状态”,它就会变得一团糟。

一种方法是只保留一些高级状态并在上下文中编写其他状态并将其传递给文本字段?(听起来也不太好)

所以很想听听你的想法,你将如何建模这样的东西。

0 投票
1 回答
179 浏览

javascript - 在 xstate 中使用嵌套状态

我正在做一个带有两个灯泡的家庭自动化项目。请参考我使用 xstate 创建的以下状态图。我也有要点,所以你也可以在可视化器中看到它。

https://xstate.js.org/viz/?gist=119995cdff639c5b99df55278a32cf57

状态图

你可以看到我需要处于这种autoInactive状态,这样我才能打开和关闭灯泡,这很好用。问题在于autoActive我仍然想打开和关闭灯泡但使用运动传感器。

所以这就是我想要做的。

  • autoInactive - 用户可以使用 UI 打开和关闭灯泡。
  • autoActive - 用户不能操作灯泡,但运动传感器会打开和关闭它们。

如何使用 xstate 实现这一点?

0 投票
1 回答
1166 浏览

reactjs - Redux 和 XState 用于数据存储和 React 集成

我的大部分 React 应用程序都使用Redux 。

我想我会开始使用XState,因为我不必一直使用效果作为插件。

而且我认为是一个更完整的模式。

我想了解的一件事是它与React(钩子和类)的联系以及它与一般反应式编程的交互:

我可以(并且我应该)以同样的方式使用XState context作为Redux数据存储,在React 组件共享的方式上拥有单一的事实来源吗?我的组件是否能够“ connect”和“ mapToPropsXState上下文并仅在这些值更改时而不是每次状态机状态更改时重新呈现?

据我了解,Redux缺乏副作用是它可以坚持纯函数式范式。但这与使用副作用有关,例如在网络应用程序或游戏中需要很多次。

提前致谢!