- Player Machine
- Stepper Machine
- Fetching Machine
Codesandbox -> CodeSandbox - CodeSandbox
- Basic Library -> JavaScript State Machine
- Simple Intro to FSM -> Finite State Machine in JavaScript
- How to decide between useState, useReducer and XState -> YouTube Tutorial
- XState Intro, 3 Part Series -> Hello XState Part 1: Learning state machines for frontend web development
- Intro to XState, Medium article -> Intro to Xstate — a true state management library for react | Weekly Webtips
- Video -> XState Docs Speedrun - 2022
- State Pattern -> Refactoring Guru
Entry, exit, transition actions (do actions) XState has inline and serialized actions
Extended state, assigning via asign(…) Reading from state.context A car can move or stop, but at the same time, it has different attributes like color, speed, length, etc.
Inline and Serialized guards Multiple guarded transitions
type final can triger onDone callback
finished: {
type: 'final',
},
...
onDone: {
target: '.loading',
},