如何使用 xstate

Question

我正在尝试使用 xstate 构建一个真实世界的应用程序，但在对应用程序启动进行建模时遇到了问题。

用户可以通过输入 www.ex.com 进入主页进入应用程序 但用户也可以输入应用程序 www.ex.com/any-page

谁能举一个多页面建模应用的例子

用户可以在登录页面或主页上未经身份验证，但不能在安全页面上

或

用户可以通过身份验证并位于任何页面

我希望每个页面都有自己的状态，这就是提示问题的原因。

Answer 1

<块引用>

我希望每个页面都有自己的状态，这就是提示问题的原因。

别这么想；至少一开始不是。使用数据优先的方法，例如在本例中：https://codesandbox.io/s/xstate-react-back-example-4q2vh

原因是每个页面不一定是“有限状态”——它只是数据，以及同一状态的所有部分（例如，“查看页面”）。将有限状态视为应用程序在任何给定时间的行为。更改页面时行为会改变吗？可能不是，所以使用 context 而不是有限状态。