Use XState Null Events and Transient Transitions to Immediately Transition States
It is often useful to identify conditional branching in your machine as a state itself. A state that is designed to determine the next state does not need a specific event sent to trigger the transition. Instead, we can use the "null event" to trigger an immediate, transient transition.
The null event is identified with an event name of an empty string '', and is immediately sent to the state upon entry. We can setup multiple targets with conditionals, or fire off actions to set up a future state with this transient transitions.
Instructor: [00:00] There's a saying, "If at first you don't succeed, try, try again." I want to represent that as a machine. I have states of idle, trying, and success. Every time we enter the trying state, we're going to increment the number of tries in context.
[00:16] I don't ever want to stay in the trying state. I should go back to the idle state automatically. If I do happen to try enough times and succeed, I should also automatically go to success. This seems like the kind of thing that should be chosen without an explicit event.
[00:32] In XState, we have something called the null event. On the trying state node, I'm going to add to the on property an empty string. This represents the null event. A null event is immediately taken when we enter a state. That's called a transient transition. Every time I enter trying, I'm going to immediately take the transitions I have here.
[00:53] Now, with trying, I want to either transition to success if I've tried enough, or I want to transition back to idle. To do this, we'll set two targets by using an array. The first target will be success with a condition. We'll write our tried enough condition in a moment.
[01:11] Our second target will be idle, in case our first condition isn't met. Down here in the second argument to machine the options object, we'll add our guard. We'll update our machine.
[01:22] We can see now that we have an event here that doesn't have a name. That's our null event. The null event is fired immediately upon entering the state and we attempt a transition to the next one. I find this very useful for setting up conditional branching in states like this.
[01:37] Let's give it a try on our machine. You notice that we never went into the trying state. We are immediately back into the idle state. If we look at the state panel, we'll see that our tries incremented by one.
[01:49] Let's try again. We see tries are two. Now that we've succeeded, we've tried enough times, we go immediately to success.
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!