[XState] Use an Interpreter to Instantiate a Machine

Posted 2021-03-15 answer1215

 

While it‘s powerful enough to have Machine.transition, it can get tedious constantly passing it a state and an event. It would be nice if we had a function that could take a machine, instantiate it, maintain the state of the machine, and give us the ability to send events to it.

This is where an interpreter comes in handy.

And interpreter takes the abstract machine and brings it to life. XState provides us a function, interpret, to do this. interpret returns to us a service and we can use that service to send events, subscribe to changes, and add callbacks to events such as onTransition

 

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

const lit = {
  // ‘on‘ keyword present events
  on: {
    TOGGLE: "unlit",
    BROKEN: "broken"
  }
};
const unlit = {
  on: {
    TOGGLE: "lit",
    BROKEN: "broken"
  }
};
const broken = {
  // you can leave it empty, the same as final state
  //type: "final"
};

const states = { lit, unlit, broken };

const lightBulb = Machine({
  id: "lightBulb",
  initial: "unlit",
  strict: true,
  states
});

const service = interpret(lightBulb)
  .onTransition(state => {
    // Side effect
    if (state.value === "broken") {
      console.log("Light bulb is borken");
      service.stop();
    }

    // check the state is changed or not
    if (state.changed) {
      console.log("changed to: ", state.value);
    }
  })
  .start(); // unlit when start

service.send("TOGGLE"); // lit after toggle

service.send("BROKEN"); // borken