状态机与状态图

• https://statecharts.github.io/

• https://github.com/davidkpiano/xstate

• https://sketch.systems/

• How to model the behavior of Redux apps using statecharts (链接备份)

• Are statecharts the next big UI paradigm?

• Statecharts - Controlling the behavior of complex systems

• Patterns for using React with Statechart-based state machines (链接备份)

• The state reducer pattern (链接备份)

• 高效設計 UI 狀態、以及無痛與工程師溝通的 FSM 表格 (链接备份)

不要混淆状态和数据

状态图是静置的。
数据是动态的。

状态图解决什么问题

显示定义 Model 的当前状态和未来状态。可预测未来状态。
以高层视角去理解应用的内部情况。