States, events and transitions
State
is a representation of a system in specific point of time
States of water
- ice
- liquid
- gas
- plasma
Transition
is a change between states
Events
are actions that causes transitions between states
Implementation with XState
states: {
ice: {
on: {
HEAT: {
target: "liquid"
},
}
},
liquid: {
on: {
HEAT: {
target: "gas"
},
FREEZE: {
target: "ice"
}
}
},
gas: {
on: {
HEAT: {
target: "plasma"
},
FREEZE: {
target: "liquid"
}
}
},
plasma: {
on: {
FREEZE: {
target: "gas"
}
}
},
}import { Machine } from 'xstate';
const waterMachine = Machine({
// ...
})Coding time!
2. States, events and transitions
By Kuba Skoneczny
