Introducing Construct Sturdy UIs with XState

Handle http request state with XState

Invoke an XState Service when Entering a State

Block a State Transition with a Guard

Control Transitions Order with Parallel States

Communicate between State Machines in Different Components

Save Previous States with a History State

Execute Code when Entering and Exiting States using Activities

Construct Sturdy UIs with XState

Activities are useful for anything that needs to be executed at the beginning and end of a state.  Like an animation that needs to stop or an observable that needs to be unsubscribed.  We'll add a completely spurious `Dark Side` mode for the quiz that makes all the ui elements float around the screen so that users have a more difficult time taking the quiz.  Leaving `Dark Side` mode should return all elements to their original locations.

https://app.egghead.io/api/v1/lessons/react-execute-code-when-entering-and-exiting-states-using-activities/subtitles

Instructor: [0:00] I've created a small state machine to model the two sides of the force. When you're on the light side of the force and you're corrupted, you go to the dark side of the force. On the dark side of the force, if you're redeemed, you go back to the light side of the force.

[0:14] We'll use this state machine to explain the concept called activities. Activities are useful when there's a process that needs to start when you enter a state and end when you leave the state.

[0:25] This is a great place for something like an observable that needs to be subscribed and then unsubscribed, or a set interval that needs to be canceled or WebSocket that needs to be connected and then disconnected. We'll add an activity called theDarknessGrows to the dark side.

[0:44] Let's use this machine in our app component. We'll define this activity in our second object here, theDarknessGrows. An activity is a function that takes in the context and returns another function that will be executed when the state machine leaves the dark state.

[1:08] Code up here is when you're entering the dark state, and down here is when you're leaving the dark state. We'll create a local component state variable called darkSidePower. We'll set it to  initially.

[1:22] When we enter the dark side, we'll set the darkSidePower to 10. Then, we'll set up an interval here to periodically increase that power. We'll do that every 600 milliseconds. Now, when we leave the dark state, we'll set the darkSidePower back to  and clear that interval.

[1:42] Let's make a button that allows us to change sides of the force. If the force state matches light, we'll make a button that says, "Come to the dark side," and send to the force machine a corrupt event. Otherwise, we'll say, "Go back to the light side," and we'll send a redeem of it.

[2:11] Let's use the darkSidePower by sending it as a prop into a list component. Say darkSidePower == darkSidePower. Let's set that up in the list component.

[2:27] DarkSidePower here, and we'll define it as a number. We'll add some styles to the list item. Let's set the position to relative tough to a random value based on the darkSidePower, left random value also vexed on the darkSidePower. Let's add some rotation as well and make the transition to these values.

[3:06] If we click "Come to the dark side," our answer starts to get more difficult to select. It only gets worse as the power of the dark side gets stronger and stronger until finally, if we can make it back to the light side, they return back to the normal place.

Execute Code when Entering and Exiting States using Activities

Share this video with your friends

Course

Construct Sturdy UIs with XState