Integrating 3rd Party Libraries

[00:00:00]
>> I want to address a common question that comes into play when you're working with state machines and XState in React. And one of the main questions that comes up is, how do machines with useds machine or whatever, how do they work with other libraries? And so obviously, we can't make an adapter for every single popular library.

[00:00:24]
So instead of doing that, we essentially communicate via events. And so that's what XState and just the general concept of state machines and state charts really provides as a benefit, is that everything is one of two things. It's either a state or it's an events that you send to a machine, which could in turn change the states or execute actions or anything like that.

[00:00:53]
So in the complete app, you might have noticed something in here called clock. Now this clock is meant to be sort of a time zone clock so you could see what time it is in other time zones. But let's say that I want to asynchronously fetch a list of time zones.

[00:01:11]
And I found this excellent world time API that allows me to do that. It returns me an array of time zones in JSON. And I could use those time zones directly to change the time and just get whatever time it is in that time zone. So I'm using useQuery, which if you're not familiar, React's query is an excellent library.

[00:01:37]
It's basically a caching solution. It advertises hooks for fetching, but it does a lot more than that. It does have some advanced caching logic, so that you don't have to make repeated API calls and all sorts of other things. Now, there's no adapter for using React query with XState's React, but that's not the point.

[00:02:01]
The point is any change that happens or anything you want to communicate is done via events. And same thing with side effects, if you want any side effect to happen with a certain library, you do that in actions. And so you could do what we did in previous lessons, which is parameterize those actions and execute them by calling the library.

[00:02:23]
So in this example, I'm fetching the time zones from the world time API. And I need to notify my foreignClockMachine, which I'll show you over here. I have time zones in context which right now is null but I need to inform my foreignClockMachine that I received some time zones.

[00:02:43]
And so we could do that via an event. So notice, this machine knows nothing about React's query. It only knows of events that it receives. So if we get that TIMEZONES.LOADED, we could assign time zones to that data that comes in that event. And so you could see it happens really fast, but the time zones are loaded and they populate this select drop down.

[00:03:13]
And then we could select one and then it shows the correct time zone over there. So what's great about this is, if you decide to use something different than React's query or you want to tweak anything with React's query or any other library, if you're using an Apollo client, then it could basically behave the same way.

[00:03:33]
So your component is essentially communicating with the machine by events and events only. And I personally think that really simplifies just how the logic works in your application. So yeah, that's how you could use XState React with basically any library. Any questions on that?
>> If that applies to server side as well for node, cuz, I mean, I don't know, I imagine there's probably a use case on the server side for this stuff, too, maybe.

[00:04:07]
I don't no, but.
>> Okay, so that's a really good question. The question was about whether this same idea works on the node side as well. So I can tell you from personal experience that it definitely does. And that's definitely a really good use case for basically how do you communicate with other libraries, whether it's on the server side or on the client side?

[00:04:34]
One exercise that you could do is actually try to communicate with WebSockets on the server side. This is something that I had to do myself. And the WebSockets API has a bunch of just places where you could add callbacks. And so those callbacks are places where you could send in events to a machine.

[00:04:56]
And so the machine's actions can also do things to that WebSocket as well. So definitely a use case and I have done that in the past.