Check out a free preview of the full State Machines in JavaScript with XState, v2 course

The "Parallel States Q&A" Lesson is part of the full, State Machines in JavaScript with XState, v2 course featured in this preview video. Here's what you'd learn in this lesson:

David answers student questions regarding if it's better to use final in nested states rather than target Id, if splitting the child states into their own functions or files is recommended to help readability, and if a serializable machine could be obtained are also covered in this segment.


Transcript from the "Parallel States Q&A" Lesson

>> So, one of the questions might be why would we do that? And honestly, it's only an organizational thing and keeping things nice and organized. Just so that you could clearly see, okay, these are the responsibility of this player state. And these transitions are the responsibility of this volume state, anything that happens in there?

All right, one question asked in the chat. Is it better to use final in nested states and on exit?or on done rather than target in ID? And the answer is yes. And we're gonna be taking a look at that at the next section, or one question asked in the chat.

Was in order to make it a bit more readable is it recommended to split the child machines or the child states into their own functions or files? And honestly, this is up to you. Think about how you would structure your own code base. Since this is just an object, you could separate these outs into separate variables and just call it volume state or something like that.

And then import it into this file and so that might make things a little bit more clear. Also if you can't do that then you could just basically collapse everything and get a really nice higher level overview of how. Just everything that can happen. And so while yes, this is big, try to imagine this in code without a state machine or a state charts.

Over here. I could take a glance at everything and understand what the different states of my app can be in such as loading or ready. And what can happen in each of those states. And so I also see that I'm handling the player in the volume if I also handle something else over here.

Then I have a really nice higher level overview of those things. And I also have a way of saying or of seeing what transitions in events are handled in the state machine. So I already have a really good overview of all the features of my application just by looking at this object.

And if your object is big, that means that you have a lot of features and you have a lot of different ways that users can interact with the application. Which definitely not a bad thing but yes having that organized is something that's up to you and something that of course is always beneficial to do.

So yeah I do recommend if you want to split it up into separate files that's up to you and in a future lesson. We're gonna talk bout just the idea of splitting things up into separate machines as well if you wanna do it that way. And that's essentially the same idea as splitting it up into separate files the follow up question is will you be able to get a Serializable machine.

If we're exporting this from a different file into this machine and the answer is yes. And that's because in our player machine we are collecting all of those and we are basically creating a runtime big objects value. Of all of the different states and transitions regardless of where they live in our code base.

And that is something that, for example, if you're using X state inspect. That's something that is sent over the wire to the inspector, and it's still going to be able to see the entire machine. So you know what, I'll just do a Small little example over here. We have an object over here that's not really reading anything that we need to import.

So I'm just gonna copy and paste this and call this volume state. And we're gonna put it over here so volumes state equals that big objects. And you can imagine that this might live in a separate file. But now, we see that we have volume as volume state, and this is going to be visualized just the same.

So we could even, for example, copy all of this and put it in our visualizer. And the raise of n is missing, so I'm just going to comment that out just for the sake of time. And so you're going to see that even though we have that as a separate parts it's still being visualized the same.

So we have the volume right down here. [LAUGH] And that's something else that we also added in there too and also the player. We have loading ready with our playing in paused states and so it could go between those states. And we could see just the different regions that we have in our application.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now