DEV Community

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

Collapse
mpocock1 profile image
Matt Pocock Author

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

Collapse
equimper profile image
Emanuel Quimper

Something like you do with useMachine

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

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

Thread Thread
mpocock1 profile image
Matt Pocock Author

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.

Thread Thread
equimper profile image
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.

Thread Thread
mpocock1 profile image
Matt Pocock Author

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.

Thread Thread
equimper profile image
Emanuel Quimper

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

Thread Thread
mpocock1 profile image
Matt Pocock Author

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.

Thread Thread
equimper profile image
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