Discussion on: How to manage global state with XState and React

[Emanuel Quimper]

Thank you for this. Really love it. Question for you, from what I see this is impossible to inject later some services like you will do with a simple useMachine when it's local machine right ? What I mean by that it's I want to use it as global like you do but would like the services to be inject in the component where those thing happen. But I don't think it's possible.

[Matt Pocock]

Could you provide some code to explain what you mean? What are you looking to achieve?

[Emanuel Quimper]

Something like you do with useMachine

const globalServices = useContext(GlobalStateContext);
const [state, send] = useMachine(globalServices.authService.machine, {
  services: { myService }
})

But doing it won't work cause this look like create a new instance

[Matt Pocock]

What would you expect to happen in this instance? I am still confused by what you're trying to achieve.

You're correct, the above code won't work.

[Emanuel Quimper]

What I try to do it's in my case the service are apollo mutation. I don't want to upfront all the mutation need in this global service. By doing this way I would be able to control the pattern from the component but getting it to work with the global machine.

[Matt Pocock]

Why do you want the apollo mutation to be held in the global service? It feels more natural to me to have it in the component where it's used.

[Emanuel Quimper]

I want my service who is global for all the onboarding part to handle the logic and make component quite simple.

[Matt Pocock]

Right - I think that's a mistake. Instead, you should keep truly local state local. I would make a state machine inside the component to handle this.

[Emanuel Quimper]

Cause I was trying to implement like you show in the xstate catalog with the multi steps form. Was working well until this issue. Thank you