Why using RxJS with XState?

[tjdam]

This may be a bit off topic and a completely noob question, but I've been looking into RxJS recently (mostly because I seen David mentioning it many times in older presentations) and though I'm finding it really fascinating, it's not clear to me where/why I would use it with XState.

I wasn't familiar to the concept of observers until I started using XState and from what I understood the XState service is implemented as an observable, is that right? That being the case, what are the benefits of bringing RxJS into the picture?

[davidkpiano]

Practically speaking, if you don't know why you would use RxJS with XState, do not use RxJS with XState.

This is one of those things where you'll know when you need it, and most of the time, you won't.

But if you're curious, RxJS allows you to create complex streams of values, which can be turned into a stream of events, which can be invoked in XState; and the opposite is true, too: if you're already using RxJS in your app, it's helpful to know that XState services can be consumed as observables.

[tjdam]

Thanks a lot for you answer!

I've been using RxJS with events in some parts of my application because it makes it easier to reason (also a lot less code), but so far I just have them local inside my components (React) where I feel they should be (the way I'm using it, at least), but the idea of having things like this communicating with XState seems pretty wild! I'm interested just don't quite understand where I'd use it.

Outside the examples in the docs, do you have any concrete example I could look at?

[davidkpiano]

Not a concrete example, but I've been doing things like this:

// ...
invoke: {
  src: () => merge(fromEvent(someElement, 'click'), fromEvent(anotherElement, 'click'))
}

You can probably find some Angular + XState projects that are using observables:

• https://github.com/stefanoslig/angular-xstate
• https://github.com/stefanoslig/xstate-angular
• https://github.com/nartc/nx-state-machine-todos-mvc

[tjdam]

🤯