Test and inspect real-time state machine transitions with useService from @bemedev/app-reactjs.
{
"initial": "idle",
"on": {
"TOGGLE_LOG_EXPAND": {
"actions": [
"toggleLogExpand"
]
}
},
"states": {
"idle": {
"tags": [
"idle_state"
],
"on": {
"START": {
"target": "/active",
"actions": [
"log"
]
}
}
},
"active": {
"initial": "speed_low",
"tags": [
"active_state"
],
"states": {
"speed_low": {
"tags": [
"mode_eco",
"low_speed"
]
},
"speed_high": {
"tags": [
"mode_turbo",
"high_speed"
]
}
},
"on": {
"INC": {
"actions": [
"increment",
"log"
]
},
"DEC": {
"actions": [
"decrement",
"log"
]
},
"ACCELERATE": {
"target": "/active/speed_high",
"actions": [
"accelerate",
"log"
]
},
"DECELERATE": {
"target": "/active/speed_low",
"actions": [
"decelerate",
"log"
]
},
"STOP": {
"target": "/final",
"actions": [
"log"
]
}
}
},
"final": {
"tags": [
"completed"
],
"on": {
"RESET": {
"target": "/idle",
"actions": [
"log"
]
}
}
}
}
}Current hierarchical state value and active tags
Send events to trigger machine state transitions
Demonstrates selective reactive re-rendering with options.selector
{
"status": "idle",
"context": {
"count": 0,
"speed": 1,
"logs": []
},
"event": {
"type": "machine$$init",
"payload": {}
},
"value": "idle",
"tags": [
"idle_state"
]
}