`XState` is just so great. I am really amazed to see such a mathematical way of organizing state flow can happen in the Javascript world. Here I want to explain how the state of this State Machine is managed in `XState`. This is something I don't find a clear explanation for in the official doc. I hope this article can clear some doubt for you. # A Simple Example I have build a very simple on/off toggle button using a `XState`. You can find the source code [here](https://codesandbox.io/s/xstate-toggle-local-uf6ko0?file=/src/App.tsx). `toggleMachine.ts` ```javascript import { assign, createMachine } from "xstate"; interface onOffMachineType { count: number; } const machine = createMachine( { predictableActionArguments: true, id: "onOff", initial: "btnOff", context: { count: 0, }, states: { btnOff: { on: { PRESS: { target: "btnOn", actions: "increment", }, }, }, btnOn: { on: { PRESS: { target: "btnOff", actions: "increment", }, }, }, }, }, { actions: { increment: () => { assign({ count: (context: onOffMachineType) => context.count + 1, }); }, }, } ); export default machine; ``` This is a simple on/off switch state machine. It's doing 2 things: * toggle between on and off * increment the count every time `toggle.tsx` ```javascript import React from "react"; import { useMachine } from '@xstate/react'; import toggleMachine from "../machines/toggleMachine"; const Toggle = function() { const [current, send] = useMachine(toggleMachine); return (

{current.matches("btnOff") ? "Off" : "On"} {current.context.count}

) ; } export default Toggle; ``` `app.tsx` ```javascript import "./styles.css"; import Toggle from "./components/toggle"; export default function App() { return (

); } ``` Now you have 3 `Toggle` components on the page, and each of them have independent states (the on/off state, and the total count number). Let's clarify a few concepts here. ## The Machine The `State Machine` is created by invoking `createMachine(config)`. This machine is just a logical blueprint without any state and transition happening. What? The state machine has no state? So how can a Finite State Machine has no state? Look at this sample code that is documented in the [official site](https://xstate.js.org/docs/guides/transitions.html#api): ```javascript const { initialState } = promiseMachine; console.log(initialState.value); // => 'pending' const nextState = promiseMachine.transition(initialState, { type: 'RESOLVE' }); console.log(nextState.value); // => 'resolved' ``` The answer is here. **The machine is a pure function!** Pure function is a function that: * has no side effect * the output is purely depends on the input ### About Functional Programming If you have difficulty understanding about this concept, I would suggest you to learn more about functional programming. This is an interesting topic and would definitely improve your development skills a lot. ### The State Is Saved Outside Of The Machine Object This is a brilliant design. Separating these 2 gives lots of flexibility. For example: * You can have multiple states working on the same machine instance. * You can serialize and persist your state somewhere else, and use it back anytime later. * Keeping the machine stateless is easier to do test. ## The Service `Service` is an interpreted machine. That means it execute instructions of the machine. In order to do it, it needs to have: * the machine blueprint * current state (including context) * functions to perform operations, such as transition. It is basically just a helper object to work with the machine. It's not necessary to use it, but it would make your work a lot easier. In React, more importantly, `useMachine()` will return you a service that its life cycle is hooked up with your component. This is what mentioned in the [official doc](https://xstate.js.org/docs/packages/xstate-react/#api). > A React hook (opens new window)that interprets the given machine and starts a service that runs for the lifetime of the component. But wait... how do we get the service instance? ```javascript const [current, send] = useMachine(toggleMachine); ``` The current is just the state object, and the send is just a send function. Where is the `Service` that we are talking about? It's the third return arguments that you don't see often in the doc: ```javascript const [current, send, service] = useMachine(toggleMachine); // Be aware that although they both have the same value, current is observable, while serivce.state is not. const sameCurrent = service.state; const sameSend = service.send; ``` The first 2 arguments that useMachine() returns are actually just convenient objects. The are just the subset of the service object. The other way to do is use `useInterpret()`: ```javascript const service = useInterpret(toggleMachine); ``` Without clear understanding about this, one of the mistake you can make would be: ```javascript const [current, send, service1] = useMachine(toggleMachine); const service2 = useInterpret(toggleMachine); // service1 and service2 have independent states. They are different! const notTheSameCurrent = service2.state; const notTheSameSend = service2.send; ``` ## Breaking Down Into Small Components Now, lets see how we break down the on/off toggle example into small stateless components: ```javascript import React from "react"; import { useMachine } from '@xstate/react'; import toggleMachine from "../machines/toggleMachine"; import { InterpreterFrom } from "xstate"; interface ServiceProps { service: InterpreterFrom; } // All these 3 child components now become stateless. Their output is purely depended on the input (the input state). // This makes them simple, easy to understand, and easy to be tested. const Btn = function({service}: ServiceProps) { return ; } const ShowState = function({service}: ServiceProps) { return {service.state.matches("btnOff") ? "Off" : "On"}; } const ShowCount = function({service}: ServiceProps) { return {service.state.context.count}; } const Toggle = function() { const [, , service] = useMachine(toggleMachine); // we pass in the service props to the child components // one of the common mistakes is to use useMachine(toggleMachine) inside child components. That will just create a new service instance with new state instances instead of using the same one. return (

) ; } export default Toggle; ``` # Global State Now let's explore about how to make your state being accessible in global scope. ## When To Use Global State? Putting everything into global is tempting because things can be easily accessed by all components. But this will make all your components stateful. (I have already explained why our design should toward stateless instead of stateful above.) We should keep our states as local as possible. General things that you should put into global state are: * Fetched data that being used everywhere * User's profile data * User's authorization data * Theme apperance Things that you should put into local state are: * Transistent UI state * Form filling status ## Using React Context This sample is very similar to the one in [official doc](https://xstate.js.org/docs/recipes/react.html#global-state-react-context). The code is [here](https://codesandbox.io/s/xstate-toggle-global-jbzmr2). `App.tsx` ```javascript import React, { createContext } from "react"; import toggleMachine from "./machines/toggleMachine"; import { useMachine } from "@xstate/react"; import "./styles.css"; import { InterpreterFrom } from "xstate"; import Toggle from "./components/toggle"; export type GlobalContextType = { toggleService: InterpreterFrom; }; // The GlobalContext is created out of the App scope, and it is exported to be share with all other components export const GlobalContext = createContext(null); export default function App() { // the official doc is using useInterpret to get the service // I keep using useMachine just to make it consistence with other examples I was doing // They both give you the service instance anyway // This toggleService have the same life cycle as the App component (that's our whole applciaiton) const [, , toggleService] = useMachine(toggleMachine); return ( // The service instance is assigned into the GlobalContext here

{/* Now 3 Toggle components are sharing the same state */}

); } ``` `toggle.tsx` ```javascript import React, { useContext } from "react"; import { GlobalContext, GlobalContextType } from "../App"; import { useActor } from "@xstate/react"; const Toggle = function() { const { toggleService } = useContext(GlobalContext); // useActor() will make your state reactive. const [state] = useActor(toggleService); return (

{state.matches("btnOff") ? "Off" : "On"} {state.context.count}

) ; } export default Toggle; ``` ## Putting States into Mobx #### Can't we just keep the state in XState? Why do we still need Mobx or Redux? XState is good at managing state flow. State management tools is for managing global state and keep your states reactive in React. They are not direct replacement. It is completely fine to keep your states in XState, but you may find it useful to introduce state management tools when the project gets bigger. Below example is using Mobx. It should be very simple to switch to Redux. The idea is that, we listen to the transition events in XState, and apply the state changes to the Mobx store. That's it. It's very easy to understand, but putting them all together requires a bit of work. Especially about how you setup the context and create the store. The code is [here](https://codesandbox.io/s/xstate-toggle-mobx-i26l2c). `App.tsx` ```javascript import createToggleStore, { ToggleStoreContext } from "./stores/toggleStore"; import toggleMachine from "./machines/toggleMachine"; import { useMachine } from "@xstate/react"; import Toggle from "./components/toggle"; import "./styles.css"; export default function App() { const [, , toggleService] = useMachine(toggleMachine); // The Mobx store is created, and the PRESS function of this particular service instance is passed in. const toggleStore = createToggleStore(() => { toggleService.send("PRESS"); }); // This is where we sync the state to Mobx // We listen to the transition events, and put the latest states back to Mobx // We can do the same for Redux here toggleService.onTransition((state) => { if (state.changed) { toggleStore.setCount(state.context.count); toggleStore.setState(state.value.toString()); } }); return (

{/* All three Toggle components are watching the same state from Mobx */}

); } ``` `toggleStore.ts` ```javascript import { makeAutoObservable } from "mobx"; import { createContext } from "react"; export type ToggleStoreType = { count: number; state: string; setCount(n: number): void; setState(s: string): void; press: () => void; }; // We need to pass in the transition function because we don't have this before the XState's service instance is created in App.tsx export default function createToggleStore(press: () => void) { return makeAutoObservable({ count: 0, state: "", setCount(n: number) { this.count = n; }, setState(s: string) { this.state = s; }, press }); } // I am keeping the Context here instead of App.tsx export const ToggleStoreContext = createContext(null); ``` `toggle.tsx` ```javascript import React, { useContext } from "react"; import { ToggleStoreContext, ToggleStoreType } from "../stores/toggleStore"; import { observer } from "mobx-react-lite"; const Toggle = function () { // we now get back our toggleStore here // As you can see, there is no XState dependency here // This component is only interacting with Mobx. const toggleStore = useContext(ToggleStoreContext); const View = observer(() => (

{toggleStore.state === "btnOff" ? "Off" : "On"} {toggleStore.count}

)); return ; }; export default Toggle; ``` ## Conclusion Here you go! We have done XState handling in 3 ways: * Under local component * Global based on React Context * Global with Mobx Choosing which one to use is totally depends on the situtation. The most important is to understand how everything works together. XState is a great tool to help you seperate your business logic out from your UI code, and it helps to make your components simple. I encourage all React developers to learn XState.

jasonching

How to Manage the XState's State Scope in React.JS

Join Our Newsletter. No Spam, Only the good stuff.