This course has been updated! We now recommend you take the State Machines in JavaScript with XState, v2 course.
Transcript from the "Transitions, State & Event Objects" Lesson
[00:00:00]
>> Let's see what we get when we transition with this feedback machine. So in order to transition, we could use two types of syntax. We could first just say when this event happens and give it the key of the siblings. So in this case, the sibling of question is form.
[00:00:20] So we could say when we click DAD, we go to form. Thanks is also a sibling, so when we click good, we go to thanks. And there's two types of syntax for that. This is just a shorthand for this. So instead of saying, just the string, so we could say on: CLICK_GOOD, we go to the form.
[00:00:44] This is just shorthand for having target form, where target is the target sibling state mode. So just like that. And so let's actually dive into what is in the state object that's returned. We're gonna start with the initial state. So let's log the feedbackmachine.initialState and see what our first state is.
[00:01:15] All right, so we have a bunch of things happening over here. First, we have the state value, which is what state we're currently on. In this case, we are in the question state. Which makes sense because that's the first state that we specified in initial. We also have a few other things here.
[00:01:36] We have events. This is a special internal event that says the machine just started. Any event that you pass in will appear in the events property of your state object. For now you don't really have to worry about any of the other properties except for value in events.
[00:02:03] All right, so in events, something that we sent in the machine, can either be a plain string which represents the events type or it could be an event object. If you've come from Redux or NgRx or ViewX, this might seem very familiar to you. An event is an object with a type and the type represents the type or name of that event.
[00:02:26] So let's go ahead and make an event. So let's say const clickGoodEvents =, and we're gonna just give it a type of CLICK_GOOD. Okay, so now let's get the next date after we transition from the initial state. So that's going to be const nextState = feedbackmachine.transition. And the first argument is going to be the current state which should feel familiar to you.
[00:03:00] So feedbackmachine.initialState because we're starting from the very beginning, and we send it that CLICK_GOOD event. So that's console.log(nextState). Okay, so we could see that we have the nextState of form, which is a bit unexpected, and this is why it's good to test. So we see over here it's because on CLICK_GOOD, we're going to form.
[00:03:28] We could change that easily and say go to thanks. So now we're in the thanks state. And we have our events over here. Now the reason why it's an object is because we could pass in different payloads for the events. And this is going to be important in future sections when we get to conditional transitions, or we wants to update something beyond the finite state, such as the extended state.
[00:03:54] So we could say, type: CLICK_GOOD. And we could just say time: Date.now. And so once we do that, we'll see that the event now has that extra property over there. And you could read in that property.