[XState] Multiple Simultaneous States with Parallel States

Posted 2021-03-14 answer1215

Can you walk and talk at the same time? If so, you‘ve experienced what it‘s like to be in two states at the same time. Hopefully, those two states have no influence on the other. Whether or not you talk, you can walk, and vice versa. States that occur concurrently and have no affect on the other are known as "parallel states".

Parallel states happen simultaneously. The machine is in all of the parallel states at the same time. To create a parallel state node, we set the type to ‘parallel‘ and then remove the initial state. There‘s no need for an initial property when you‘re in all the child states at the same time.

 

const { Machine } = require("xstate");

const spaceHeaterMachine = Machine({
  id: "spaceHeater",
  initial: "poweredOff",
  states: {
    poweredOff: {
      on: { TOGGLE_POWER: "poweredOn" }
    },
    poweredOn: {
      on: { TOGGLE_POWER: "poweredOff" },
      type: "parallel", // mark parallel
      states: {
        heated: {
          initial: "lowHeat",
          states: {
            lowHeat: {
              on: { TOGGLE_HEAT: "highHeat" }
            },
            highHeat: {
              on: { TOGGLE_HEAT: "lowHeat" }
            }
          }
        },
        oscillation: {
          initial: "disabled",
          states: {
            disabled: {
              on: { TOGGLE_OSC: "enabled" }
            },
            enabled: {
              on: { TOGGLE_OSC: "disabled" }
            }
          }
        }
      }
    }
  }
});