XState es una librería e intérprete que te permite implementar máquinas de estado en proyectos reales con TypeScript, React, Vue, Svelte y otras tecnologías. Si vienes siguiendo las clases anteriores sobre teoría de máquinas de estado, aquí conectas esos conceptos con una herramienta concreta que puedes usar hoy mismo.

¿Qué es XState y para qué sirve en un proyecto?

XState es una base construida por su equipo que tú luego implementas con la tecnología de tu preferencia. Sirve para modelar el comportamiento de tu aplicación como estados finitos y transiciones, en lugar de manejar booleanos sueltos que terminan chocando entre sí.

¿Qué es XState? Es una librería e intérprete que te ayuda a manejar máquinas de estado en distintas tecnologías como React, Vue, Svelte y TypeScript [0:15].

La documentación oficial es bastante completa: incluye guías, tutoriales, recetas, paquetes y ejemplos. Vas a encontrar paquetes específicos para los frameworks más comunes y también utilidades para testing e inspect de tus máquinas.

¿Qué paquetes y recursos ofrece XState?

Dentro de su ecosistema vas a encontrar piezas pensadas para distintos momentos del desarrollo.

• Paquetes para React, Vue, Svelte y Graph.
• El paquete core con la máquina de estado básica.
• Utilidades para pruebas y para inspeccionar máquinas en ejecución.
• Templates listos para iniciar proyectos con XState en varias tecnologías.

Esto significa que no tienes que reinventar la rueda: eliges el paquete según tu stack y empiezas a modelar.

¿Cómo funciona el visualizer de XState?

El visualizer es una página oficial donde pegas el objeto de tu máquina de estados y lo conviertes en un diagrama interactivo [1:20]. Lo encuentras en la parte superior de la documentación y es una de las herramientas más útiles cuando recién estás bosquejando tu lógica.

El objeto que pegas tiene una estructura clara. Defines un estado inicial, por ejemplo llamado Inicial, y luego un listado con todos los estados posibles en los que tu máquina puede encontrarse. Dentro de cada estado declaras la propiedad on, que sirve para describir los eventos que ese estado puede recibir.

¿Para qué sirve la propiedad on en XState? Sirve para declarar los eventos que un estado específico puede recibir y a qué estado debe transicionar cuando ese evento ocurre.

Un ejemplo del flujo que se muestra: estando en Inicial puedes ejecutar initUpload para pasar a cargando, y desde ahí ejecutar uploadComplete para avanzar al siguiente estado [1:55].

¿Cómo se ve un diagrama interactivo de estados?

Después de pegar el objeto y darle visualize, el visualizer dibuja el diagrama y lo deja navegable.

• El estado activo aparece resaltado con un borde azul.
• Solo se habilitan las transiciones válidas para ese estado.
• Al hacer clic en una transición, el diagrama se mueve al siguiente estado.
• Puedes recorrer toda la máquina como si fueras un usuario real.

Esta interacción te permite validar el flujo antes de escribir una sola línea de lógica en tu aplicación.

¿Por qué usar el visualizer al empezar y al hacer debugging?

El visualizer brilla en dos momentos muy concretos del desarrollo, y por razones distintas en cada uno.

Cuando apenas estás armando tu máquina y tienes claro el flujo general pero no los eventos o transiciones exactas, ver el diagrama te obliga a cerrar huecos. Detectas estados huérfanos, transiciones faltantes o eventos que duplicaste sin querer. Es mucho más rápido mover cajas en un diagrama que refactorizar código.

El segundo momento es el debugging. Si más adelante agregas estados nuevos mientras programas y algo se rompe, puedes traer tu objeto al visualizer y ver exactamente dónde falla la máquina. Es como tener un mapa para encontrar el problema en lugar de leer línea por línea.

En la próxima clase vas a bosquejar la máquina de estados del proyecto del curso y conocer más sobre qué vas a construir. ¿Ya tienes una idea de qué flujo te gustaría modelar primero? Cuéntalo en los comentarios.