This course has been updated! We now recommend you take the State Machines in JavaScript with XState, v2 course.

Check out a free preview of the full State Machines in JavaScript with XState course:
The "Using XState with RxJS" 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 explains that RxJS and XState work well together by using an interpreted machine or service one can subscribe to that interprets XState into RxJS.

Get Unlimited Access Now

Transcript from the "Using XState with RxJS" Lesson

>> A lot of people are talking about how to use RxJS with XSTATE. And the answer is that RxJS and XSTATE work really great together, because they work in both ways. If you go to the, not the tutorials, but the Recipes, and you see usage with RxJS. The interpreted machine, which again is called the service, the service itself is observable.

[00:00:28] Which means, it has the subscribe method, and it implements the observable interface, which means you could use this as something that you subscribe to, or you can subscribe to it directly. And each subscription, you're going to get the latest dates of the service. And so whenever a new state comes in, each one of the observers is going to be notified of when that state changes.

[00:00:53] And also whenever you stop the service, it's going to clean up those subscriptions themselves. Also, you can invoke observables which is very useful as well. And, there's a great example of how to do so in the tutorials or, sorry, in invoking services and invoking observables. So in this case, we have an interval machine where our source instead of being a promise, it's an interval, and this is taken directly from RxJS.

[00:01:28] This interval pipes out events, objects, which are of type Count, and have a value RxJS by default increments this value. So this is going to be counts 1, counts 2, counts 3, etc. And that most it's going to just emit five of these, because of this operator over here.

[00:01:48] And observables have this notion of being completed. So that's also going to call this undone transition and go to finished. So you could see how observables and state machines can interoperate between each other pretty seamlessly. So, someone is asking, why angular is missing on the list. And that's simply because I haven't had the time to make a recipe for Angular yet, but I welcome any contributions.

[00:02:17] In fact, I think it should be pretty simple since XSTATE services are subscribable. They're observable, so you could use them as if you would use any observable thing in Angular JS.