Ah, ok, I see that useMachine actually creates a new service...
Is there another way of having the state independent of the React tree (so one does not even have to pass props)? (While also having React re-render the components where the state is used when it changes).
Maybe putting the const [state, send] = useMachine(machine); into a shared hook that is used inside the relevant components?
Or extract that line outside of any component and then referencing state and send inside components (as a closure)?
No - state is not shared between the two machines.
This is like calling useReducer twice, using the same reducer.
Ah, ok, I see that
useMachineactually creates a new service...Is there another way of having the state independent of the React tree (so one does not even have to pass props)? (While also having React re-render the components where the state is used when it changes).
Maybe putting the
const [state, send] = useMachine(machine);into a shared hook that is used inside the relevant components?Or extract that line outside of any component and then referencing
stateandsendinside components (as a closure)?Seems like using React's Context is the recommended approach: github.com/statelyai/xstate/discus...
This is the closest to what I was originally thinking: github.com/statelyai/xstate/discus...