Multiple Simultaneous States with Parallel States
Can you walk and talk at the same time? If so, you've experienced what it's like to be in two states at the same time. Hopefully, those two states have no influence on the other. Whether or not you talk, you can walk, and vice versa. States that occur concurrently and have no affect on the other are known as "parallel states".
Parallel states happen simultaneously. The machine is in all of the parallel states at the same time. To create a parallel state node, we set the type to 'parallel' and then remove the initial state. There's no need for an initial property when you're in all the child states at the same time.
Instructor: [00:00] It's approaching winter here in Portland while I'm recording this. I'm inspired by my space heater, so I made a space heater machine.
[00:05] It has two top-level states -- powered off and powered on -- that are transitioned to with the toggle power event. Inside of powered on, we have a hierarchical state where we also have low heat and high heat that is toggled with the toggle heat.
[00:19] Now, my space heater has another useful feature that we should add and that's oscillation, the ability for it to go back and forth. Oscillation definitely falls under powered on, but it's not affected by low heat and high heat, so adding it here doesn't seem to make sense.
[00:36] No, oscillating is really the state of the space heater that happens in parallel to the heating of the space heater. In XState, we can create parallel states. I want to comment this out for right now, so that we're not distracted by it.
[00:51] To create parallel states, we first do not provide an initial, since it's in each state all at the same time. Instead, we define a type of parallel.
[01:02] From here, we then enumerate the states that we're in all at the same time. In this case, we'll be in a heated state and we'll be in an oscillation state.
[01:12] Let's update the machine as is. We can now see that when we're powered on, we have two top-level states. If we toggle in, we're inside of heated and oscillation both at the same time.
[01:25] We can now take the values we had here for our heated. We can copy them and move them inside of the heated state. We'll update the machine. We'll see that heated now has its own state that we can toggle between, and it doesn't change anything about oscillation, partly because we haven't written it yet, so let's add that.
[01:46] I'm going to fix my indentation really quick and give myself some room here to see my editor. Inside of oscillation, we'll have an initial of disabled and states of enabled and disabled.
[02:03] We'll update our machine. We can now see that when we're powered on, we're both in the initial state of low heat for heated and disabled for oscillation.
[02:13] I can toggle these and they have no effect on the other state. When I click toggled power, I leave all those states and go back to powered off.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!