Nested/hierarchical States
See original GitHub issueNested states are beneficial for a myriad of reasons, including:
- State nesting lets you define a new state rapidly in terms of an old one by reusing the behavior from the parent state
- State nesting lets you get new behavior almost for free, reusing most of what is common from the parent states
Configuration
This is what a nested state machine configuration would look like:
// Traffic Lights
useStateMachine()({
initial: "green",
states: {
green: {
on: {
TIMER: "yellow",
},
},
yellow: {
on: {
TIMER: "red",
},
},
red: {
on: {
TIMER: "green",
},
// Nested state: Pedestrian traffic light
initial: "walk",
states: {
walk: {
on: {
PED_COUNTDOWN: "wait",
},
},
wait: {
on: {
PED_COUNTDOWN: "stop",
},
},
stop: {},
},
},
},
});
State value representation:
The returned machine state would still have a string representation for the state value. Nested stated will be represented with dot syntax. For the above example, possible states are:
green
yellow
red.walk
red.wait
red.stop
Transitions & Effects
For every transition, the state machine should traverse the config three (depth-first) and find the shortest path for the transition. Effects should be invoked on parent state only once: transitioning between child states should not re-fire parent effects.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:13 (10 by maintainers)
Top Results From Across the Web
Nested States (Hierarchical states) - Robot
Statecharts support hierarchical states (or nested states) as a way to deal with the state explosion problem of traditional finite state machines.
Read more >Hierarchical state nodes | XState Docs
Hierarchical state nodes. In statecharts, states can be nested within other states. These nested states are called compound states. To learn more, read...
Read more >Hierarchical State Machine - EventHelix
The state classes are nested private classes within the state machine class. Thus they are not visible to other classes. The state machine...
Read more >State Machines in JavaScript with XState - Frontend Masters
David explains that states that have common behaviors can be nested together within a visible state. Hierarchical states are equivalent to nested states....
Read more >Introduction to Hierarchical State Machines (HSMs) - Barr Group
The substates (nested states) need only define the differences from the superstates (surrounding states). A substate can easily reuse the common ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
My pleasure!
You can continue with the implementation if you want, as said the implementation types need not be fully type safe. I’ll start working on the user facing types too once I’m done with types for 1.0
Turns out we’re not using nested states at all - we’re invoking other machines and waiting on the results. I think that’s already possible without any changes (thanks, React!) but maybe I’ll propose something if I run into problems.