Parallel States

[00:00:00]
>> Another major feature of state charts are parallel states. So when David Harrell invented state charts in 1987, give or take, two of the main features were orthogonality and hierarchy. So the hierarchy comes with compound states where you could have this hierarchy of states, and this orthogonality represents just many states that can be active at the same time.

[00:00:26]
Now you might be thinking to yourself, wait a minute, finite state machines, I thought that the number one rule was that you can only be in exactly one state at any given time. And that's still true even with parallel states. So what we're gonna be modeling over here, I'll just show you an example in Excalidraw, is we have all of these different states, we have loading and ready.

[00:00:52]
But let's say that we also want to control the volume in the same state machine. So, Whether it's loading or playing or paused or in this ready state, it doesn't matter. The volume can still be muted and unmuted at any time. It sort of lives independently from all of these states.

[00:01:16]
So what we would have to do, if we were trying to represent this strictly as a state machine, is we would have to have, and let me just change this color real quick. We would have to have a loadingMuted state. And a loadingUnmuted state, I'm gonna spell that right, unmuted.

[00:01:42]
And we would have to have all of the states like this too. We would have to have playingMuted, playingUnmuted. PauseMuted, pausedUnmuted. And so now you see that our three states have multiplied into six different states. And so now if we have to represent something else such as whether the media player is expanded or collapsed, now you're multiplying this by two again.

[00:02:12]
And then if you want to represent different states, such as if you if you decide to represent something being liked, unliked, or disliked. Now you're multiplying all those states by three, and this is where state explosion happens. So that's why with both compounds state and parallel state, we can really manage and prevent this state explosion from happening.

[00:02:38]
So the way we do this is instead of creating a combination of all those states, like a Mexican or a Chinese restaurants where it's just like a menu full of 100 different meal options, which are really just combinations of the same eight ingredients. We're going to represent these as parallel states.

[00:02:59]
So, the way we do that is by creating what are called regions, and don't be scared by the term regions, it's just a way of saying, just child parallel state. So let's say that we have this entire machine as a parallel state, and we have two separate regions, and again think of regions as states, we have this which represents the media player.

[00:03:27]
And then we have a separate region, which represents the volume. And so, this volume can be muted, it's really small, or it could be unmuted. And so both of these states can transition between each other. We could have muted going to unmuted, or unmuted going to muted, so just like this.

[00:04:00]
And these are just on different events, either the mute, the unmute, or we could have a volume.toggle event as well. Ad so in xstate, the way that you represent these parallel states is by specifying the state node as type of parallel. So let's go back to our example machine here and just create a little example.

[00:04:23]
So instead of providing an initial state, I'm just going to provide type parallel on the machine itself. Now we're gonna specify our states as normal, but these states are going to be parallel states. So we could have, I'm gonna have something for, let's say mode, and so our state can be dark mode, or light mode.

[00:04:52]
And initially, we're gonna do light mode, and then we might have another parallel state for display. So initial on, states on, off. And so now you see that this is what these parallel states look like. We're both in the display on state, and the mode light state. Now we could go back and forth between the mode light and dark state without affecting the display, or we could go back and forth between the on and off states in display without affecting the mode.

[00:05:29]
Or the same event can be handled by states inside this parallel region, and this parallel region, so you might have multiple transitions happening at the same time. Again, just like compound states, parallel states are an organizational technique for reducing the number of states and transitions in your state machine.