pub/sub for unrelated machines ?

[iangregsondev]

Hi,

i have spent quite a bit of time going through the examples, reading docs and a few other resources and I kind of feel confident to start :-)

But I do have some queries that I am not sure about, I wonder if anyone can help ?

My idea was to use 1 state machine per "screen" (I am using react).

Rather than having 1 big state machine, I thought of splitting this up.

These machines are not directly associated with each other though, I mean, that one state machine didn't invoke a another or use the actor to launch a child machine. SO they are kind of not related.

What is the best way of communicating between them ? There are circumstances where i need to send a message from one screen to another part of the app (notifications for example) - What is the best way of supporting a pub/sub between non related machines ?

Maybe I am approaching this all wrong but I don't see how I can relate each machine as they are worried about their own state - which I think this is what xState recommended is to have separate state and not 1 big machine.

Any ideas ?

Thanks

[davidkpiano]

These machines are not directly associated with each other though, I mean, that one state machine didn't invoke a another or use the actor to launch a child machine. SO they are kind of not related.

They're in the same app, so technically they are related.

What is the best way of communicating between them ?

Now they're definitely related! 😉

If you don't want to connect them to the same parent machine, you need some sort of "conduit" (like an event bus pattern) that can be shared between them. Something like:

// create event bus any way you want - exercise left to reader
export const eventBus = // ...

// import them and use them
import { eventBus } from './myEventBus';

const myMachine = createMachine({
  // ...
  invoke: {
    id: 'bus',
    src: () => (sendBack, receive) => {
      receive(event => eventBus.send(event));

      eventBus.onEvent(event => sendBack(event));
    }
  },
  // ...
  on: {
    SOME_EVENT: {
      // event destined for some other machine via event bus
      actions: send('ANOTHER_EVENT', { to: 'bus' })
    }
  }
});

[iangregsondev]

Thanks @davidkpiano ,

Yep my thinking behind this was if something happens in a screen then I might want a header to display a notification, so having different machines able to talk to each other would be beneficial - yep they are related :-)

THinking on my feet, which is not always a good idea, maybe I could have 1 global machine (the parent) and have that automatically invoke other services depending on the router (in my case - react router).

There was a package for this, which looked really good, but it seemed to be abandoned. https://github.com/carloslfu/xstate-react-router Well maybe that's not correct but it doesn't seem to have a commit since 27 feb 2019.

I suppose to have this "small" -parent "app" machine that designates (invokes) to other machines depending on the screen would be beneficial as then technical the screen is a child of the parent, and the child can send back to the parent and the parent can "forward" an event to another child - does this sound good ?

I would love to know what you think about implementing xstate with react router and my madness above - is that a good direction ?

Thanks