nowyDEV/state-machines-workshop

Code for presentation/workshop about state machines with XState

State machines with XState

Notes

• Usage of many boolean flags in the code greatly increases complexity (Combinatorial explosion)
• The code is prone to errors and difficult to reason about & test
• There is no control over transitions between various states of the component
• State machine pattern can be useful to solve those problems
• There are many libraries that implement this pattern e.g.
  • XState -> most popular one, well maintained & documented
  • Robot -> small & functional alternative

Branches

There are several branches with the most important steps of the presentation:

1. Start - Starting point with defined useState flags and no implementation
2. useState flags - Handle updates to useState flags
3. First state machine - Implement State machine (pure TypeScript)
4. Refactor to XState - Use XState, remove boilerplate code
5. Use context - Add XState context to track infinite state
6. Use guards - Add XState guarded transition

Additional resources

• Combinatorial Explosion
• Implementing state machine library
• XState visualizer
• Statecharts: A visual formalism of complex systems

Credits

Based on a great tutorial by @mkczarkowski