This course has been updated! We now recommend you take the State Machines in JavaScript with XState, v2 course.
Transcript from the "Parallel States Solution" Lesson
[00:00:00]
>> We have two states over here which we've defined before. We have our light state and dark state that need to switch between each other. So we could say, on switch, go to dark here. And likewise over here, we could say on switch, go to light. Now this isn't gonna change the fact that we still need to model our brightness.
[00:00:24] But it's good to check that we could go back and forth between dark mode and light mode still, and still maintain our brightness state. So we're going to be using a delayed transition to go from bright to dim. And so we could say after, in this case, we'll use 2 seconds.
[00:00:44] We're gonna go to dim, and when we're in the dim state, on switch, we go to bright. Now you might be looking at this and thinking, okay, which one of these states will win? We have a dark state that handles the switch events and we have a dim state that also handles the switch events.
[00:01:08] Because both of these are in parallel regions. The answer is that they will both handle the same events. And so if we're in dark mode and we switch, we'll go the light mode. If we're in dim mode at the same time, we will go to bright mode. So let's go ahead and test that out.
[00:01:26] When we turn on, after two seconds, it's gonna go dim. And so when we switch again, and so you could see we're brightness dim and mode dark. So when we switch again, you'll see that it goes back to being bright, which is great. And if I keep clicking switch, it's not really gonna go dim until now.
[00:01:49] So it does go to dim. And now we're in dark mode. So if I switch again, it goes back to not being dim and then it goes from bright to dim, and we could turn it off, which is a transition that we forgot. So let's go ahead and add that over here.
[00:02:11] In our visible state, this is a parent state node where it has a type of parallel and we have two states in it. But in any state node, you could still define transitions for it. So we could say on, turn_off, go to hidden. So now, We get to switch, we see the diming behavior working.
[00:02:41] There we go. And then when we turn off, we go back to hidden. Now one quick note, because the state value is not an object, we need another way of representing it. Thankfully, there's a helper method over here called toStrings. If you call toStrings, it's going to output an array of strings that represent each of those state values.
[00:03:04] So since we have something like visible mode dark, we're going to have the visible string, the visible.mode string and the visible.mode.dark string. And so in order to put that in the data state attribute, we could just join those with a space. And so that's what you see over here visible, visible.mode, visible.brightness, etc.
[00:03:29] Suzanne T asks, can we get a demo of how to combine parallel in history state? So that's a great question. It's more of an advanced topic. I don't want to spend too much time on it, but I will go ahead and show you over here. Let's say that we want to go turn on invisible.hist again.
[00:03:49] So in a parallel state, you could have your regions over here, and next to your regions in the latest version of Xstate, you could also have your pseudo state. So you could have that history, which is of course type: 'history'. But you're going to see that this doesn't actually do anything.
[00:04:10] And I want you to think about why. When we turn it on and switch to dark mode and turn it off and turn it on again, we don't get that same history state. And that's because there's two types of history state. There's shallow and deep history. Shallow remembers the immediate child.
[00:04:27] Deep remembers all descendants. And so in this case, our immediate children are mode and brightness, which we know are both active anyway. So it doesn't help us too much. So if we say, history: 'deep', then we could specify this as a deep history node. And that way, when we turn it on, switch the mode, turn it off and turn it on again, we still have that dark mode.
[00:04:51] So it works just the same. So if you want to learn more about deep history state, go ahead and look in the Xstate documentation for history. So you could just go to Guides > History, and it talks about the two types of history state nodes in there.