如何使用 xstate 对多个页面进行建模

Question

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

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

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

用户可以未经身份验证并出现在登录页面或主页但不是安全页面

或

用户可以通过身份验证并在任何页面上

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

Answer 1

I want each page to have there own state that is what is prompting the question.

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

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