A UI in All Its States with XState
summary
A refactor of a payment form replaces scattered boolean flags with an XState statechart (states: updating, processing, success, error) implemented in React and TypeScript, using XState Visualizer and inspect devtools. The machine uses guards, assign, and invoked services to call a payment API and ensures the API is invoked only once per submit (preventing four duplicate calls). The state machine is also used to generate model-based Cypress tests which are executed against the app.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 2:27State machines vs Statecharts
- 6:45Demo: Initial code issues
- 10:14Refactoring with XState
- 17:24Visualization and testing
- 19:09Integration in React
- 24:15Live inspection
- 26:04Automated test generation
- 28:31Future evolutions and conclusion
related talks
40mVisualize your State Management with XState
31mXState: the Visual Future of State Management
45mState of the Art User Interfaces with State Machines
27mXState: the Visual Future of State Management
44mScaling State in Vue: Why XState Matters
40mCoding Complex App Logic, Visually
20mSetState, We Need to Talk!
28mState machines for frontend state management