Check out a free preview of the full State Machines in JavaScript with XState course:
The "Invoking Services" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

David demonstrates how to invoke observables and callbacks by refactoring the code from the actor model exercise.

Get Unlimited Access Now

Transcript from the "Invoking Services" Lesson

[00:00:00]
>> There have been a few questions in the chat about invoking other things such as observables and call backs. So I want to demonstrate how that works exactly. So let's go to our original exercise, we saw that we could return a promise from the invoke source in X sate, intuitively knows what that promises and how to basically grabbing events from that.

[00:00:31] But we can also invoke a callback. And so this is useful. This is very useful for a wide variety of scenarios when you might not exactly have a promise which will send back at most one value in observable which could send back between zero and an infinite number of values but cannot receive any values.

[00:00:52] And in machines, which could send back and forth events in a very structured way. So a callback takes two parameters and I'm just going to call the first one, send back because we're sending it back to the parents and also we are going to have a receive. All right, so this might look a little bit weird because we have a function that's calling a function, but this is the callback source.

[00:01:26] And so we could say set timeout and we could send back, let's actually send back a different type of event. So we're going to send back An event with type, I am done. And so we could say instead of this unresolved, resolved, we could say on I am done, we could have resolved.

[00:02:00] And so let's have that happen after two seconds. Again, we're not using the promise anymore. So let's see I am done. All right, so now when we click after two seconds, it's going to send back that I am done events. And so we could see we received that I am done events from the callback and we transition to the results dates.

[00:02:24] You could invoke callbacks and you could also receive events from callbacks. So, what we could do, is we could wait to receive an event from the machine, and then only when we receive that event do we send back that call back. And so we do that using receive, and receive is the second argument that's passed in.

[00:02:47] So what receive is going to do, it's going to receive an event. And so we say, if (event.type is 'SEND_IT_ALREADY"). So if our parent machine sends this call back a send it already event, then we will send back I am done. And so now we could See, yeah, let's do that, so we could let's see on I am done.

[00:03:25] Cancel, all right, we're gonna change this cancel events and we're going to say, send it already. So you could just imagine that Cancel button being like all right, you know what, nevermind. But then it says send it already and then the callback says I am done. So, we click here and now it's waiting for us.

[00:03:47] To send that, SEND-IT-ALREADY events, which we do here, and it should go to I am done, let's see, we have sent it already. Okay, so, SEND-IT-ALREADY is being sent to the parents machine, and not to this callback, so we need some sorta way, of referencing that callback. And here's how we do it.

[00:04:08] In our invoke objects, we could give it an ID of something, it doesn't matter what, let's call this B, we'll just call it child for now. So when we get this send it already Events. There's a new action creator that we could use called send. And so we get sent from X Sates.

[00:04:36] And remember, this is just an action creator. So we could say actions. And we could send and we're going to send the event type sent it already We're gonna send it to the child. So this might look interesting to you. But this send action creator is a special action creator that creates an XState.send action, and it's telling the machine I want you to send this event to this child which we specified with that ID.

[00:05:17] So let's see if that works. If we click here, click Cancel. It's going to go to result because it's going to send the child to send it already events and this child is going to send back I am done. And then that is going to transition to resolve.

[00:05:37] So this is more of an advanced topic. You could learn more about it over here, in, If you go to the documentation and you go to invoking services, you could see the different types of services you can invoke Promises callbacks, observables and machines