Manipulación del Contexto en XState: Inicialización y Actualización

¿Qué es el contexto en XState y cómo se define?

El contexto en XState se puede considerar como una extensión significativa de la máquina de estados. En los estados previos, quizá recuerdes que dentro de cada estado había una propiedad llamada context, que en su momento era un objeto vacío. Este contexto es fundamental, ya que se utiliza para almacenar y manipular datos, lo que en nuestro caso puede incluir acciones como registrar el país seleccionado o los nombres de los pasajeros.

¿Cómo se establece un contexto inicial?

Para definir un contexto inicial en una máquina de estados, dentro del objeto principal de la máquina, se debe crear la propiedad context. Vamos a ver un ejemplo de cómo lograrlo:

const machineDefinition = {
  context: {
    passengers: [], // Almacena los nombres de los pasajeros
    selectedCountry: '' // Guarda el país seleccionado
  }
};

¿Cómo se lee el contexto?

Lectura del contexto en XState se puede hacer fácilmente imprimiendo las propiedades state.value y state.context. Esto te permitirá tener una visión clara del estado actual de la máquina de estados.

console.log(state.context);

¿Cómo actualizar el contexto?

Modificar el contexto implica varios pasos. Veamos un ejemplo donde actualizamos el país seleccionado y los pasajeros mediante eventos:

1. Actualizar el país seleccionado
   • Primero, se envía un evento con el nuevo país seleccionado.
   • Se utiliza una función assign para actualizar el selectedCountry en el contexto.

actions: {
  assignCountry: assign({
    selectedCountry: (context, event) => event.selectedCountry
  })
}

2. Agregar pasajeros
   • Para esto, se utiliza un nuevo evento llamado add.
   • El enfoque consiste en que al ejecutar el evento, se quede en el mismo estado mientras se añade un nuevo pasajero al contexto.

actions: {
  addPassenger: assign({
    passengers: (context, event) => [...context.passengers, event.newPassenger]
  })
}

Manejo de la entrada y persistencia de datos

¿Cómo se captura la data ingresada en el contexto?

Al interactuar con la interfaz de usuario, por ejemplo en formularios, necesitamos capturar los datos y enviarlos al contexto:

• Cuando se selecciona un país, se ejecuta un evento continue que actualiza el selectedCountry.
• Para los pasajeros, el evento add es crucial para que la nueva información se agregue al array existente en el contexto.

// Captura del add event
send('ADD', { newPassenger: value });

¿Cómo se visualizan los cambios en el contexto?

Para verificar que tu contexto ha sido actualizado correctamente, podrías querer imprimir o mostrar en algún componente el contenido actual de contexto, especialmente en vistas donde la interacción del usuario puede modificarlo.

Desafíos para Inspirarte

¡Te retamos! Un ejercicio propuestas es que cuando un usuario cancele una acción, el contexto debería restablecerse a su estado inicial. Además, cuando se está en la vista de pasajeros, muestra el listado de nombres antes del campo de entrada. Intenta implementar esta lógica y observa cómo mejora la dinámica de tu aplicación. ¡No olvides que el aprendizaje y la práctica son clave para mejorar tus habilidades en XState! Sigue explorando y experimentando modos para optimizar tu código y el manejo de estados en tus aplicaciones.