DEV Community

How to manage global state with XState and React

Matt Pocock on May 25, 2021

This article has become part of the official XState docs! Many React applications follow the Flux architecture popularised by Redux. This setup ...

Read full post

Emanuel Quimper • Jul 16 '21

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 • Jul 16 '21

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

Emanuel Quimper • Jul 17 '21

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 • Jul 17 '21

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 • Jul 21 '21

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 • Jul 21 '21

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 • Jul 22 '21

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

Matt Pocock • Jul 23 '21

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 • Jul 25 '21

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

Paul Berg • Jul 18 '21

The snippet that shows how to use useActor may be outdated:

TypeError: Cannot use 'in' operator to search for 'getSnapshot' in undefined

This is with react@17.0.2, xstate@4.23.0 and @xstate/react@npm:1.5.1.

Comment deleted

Paul Berg • Aug 9 '21

The issue is that you're not consuming the context provider.

github.com/statelyai/xstate/issues...

Fernando Andrés García Hernández • May 27 '21

That looks really nice! I have been using state machines with react for a few weeks now too and I'm in love with them.

I really liked your implementation of the Context and I didn't know about the useSelector, so thanks a lot for the help :)

Matt Pocock • May 27 '21

Thanks Fernando!

Petar Kolev • May 6 '23

state inconst selector = (state) => { return state.matches('loggedIn'); }; isn't typed. What type we should use on it? TS is complaining about it. Also I don't have type support in the matches method. How to apply one?

Richard Moore • Feb 12 '22 • Edited

For anyone having TypeScript issues with this in XState 4.29+ (where there are new schema and tsTypes attributes on the machine, see xstate.js.org/docs/guides/typescri...), ActorRefFrom no longer seems to work but you can use InterpreterFrom in its place

type GlobalStateContextType = {
    authService: InterpreterFrom<typeof authMachine>;
};

Matt Pocock • Mar 1 '22

Looks like it's fixed now:

github.com/statelyai/xstate/commit...

José C. Flores • Jul 1 '21

My main struggle with XState is global state management. I like creating the services in a parent machine and pulling them out from context but this example is definitely clean and easy to follow. Thanks for sharing.

creativemacmac • May 21 '22

Xstate both looks and sounds phenomenal! 🤩 Thanks a mil for this