Ideas/conceptos claves

Contexto

Es una parte extendida de la máquina de estados

Apuntes

• El contexto en general nos ayudará a guardar datos

Establecer un contexto inicial

import { createMachine, assign } from "xstate";

const bookingMachine = createMachine({
		...,
    context: {
			// Objeto de contexto
      passengers: [],
      selectedCountry: "",
    },
    states: {...}
	}
);

Leer Contexto

import { useMachine } from "@xstate/react";

export const BaseLayout = () => {
  const [state, send] = useMachine(bookingMachine);

  console.log("nuestro contexto", state.context);

  return ( ... );
};

Actualizar contexto

const bookingMachine = createMachine(
  {
    ...,
    states: {
      ...,
      search: {
        on: {
          CONTINUE: {
            target: "passengers",
            // 1️⃣ Primera Forma: Pasando un objeto a la función assign,
            // En el mismo se debe especificar las propiedades a modificar
            actions: assign({
              selectedCountry: (context, event) => event.selectedCountry,
            }),
          },
          // 2️⃣ Segunda forma: Llamando a una accción definida en el machine
          CANCEL: { target: "initial", actions: "cleanContext" },
        },
      },
      passengers: {
        on: {
          ADD: {
            target: "passengers",
            // 3️⃣ Tercera forma: Modificando directamente el objeto de contexto
            // pasando una función al objeto assign
            actions: assign((context, event) =>
              context.passengers.push(event.newPassenger)
            ),
          },
        },
      },
    },
  },
  {
    actions: {
      cleanContext: assign({
        selectedCountry: "",
        passengers: [],
      }),
    },
  }
);