xstate - 如何使用 xstate 建模多个页面

Question

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

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

有人可以举一个具有多个页面的建模应用程序示例吗

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

或者

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

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

标签： xstate

Answer 1

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

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

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