[XState] Track Infinite States with with XState Context

Posted 2021-03-14 answer1215

Consider a text input. It would be impossible for anyone to model every value you could possibly put into it, because the number of possible values is infinite. This is an infinite state.

Infinite state can be tracked and utilized by XState machines as "extended state". This extended state is called context. Context is passed to every function that is triggered by the machine: actions, activities, guards, and more.

In this lesson we learn how to set context and update it through assign actions.

 

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

const inputMachine = Machine(
  {
    id: "inputMachine",
    initial: "input",
    context: {
      value: "Please enter a color"
    },
    states: {
      input: {
        on: {
          CHANGE_VALUE: {
            actions: ["changeInput"]
          }
        }
      }
    }
  },
  {
    actions: {
      changeInput: assign((context, event) => {
        return { value: event.color };
      })
    }
  }
);

const service = interpret(inputMachine)
  .onTransition(state => {
    console.log(state.context); // red
  })
  .start();
service.send({ type: "CHANGE_VALUE", color: "red" });