Introducción a Xstate: Gestión de Máquinas de Estado Interactivas

Clase 3 de 15 • Curso de State Machines en React.js

Clase anteriorSiguiente clase

Fernando Quinteros Gutierrez

student•

❎¿Qué es XState?

Ideas/conceptos claves

XState

Es una librería e intérprete para trabar con máquinas de estado y diagrama de estados en diferentes tecnologías

Recursos

XState Docs

XState Visualizer

Apuntes

XState puede integrarse con diferentes tecnologías como ser React, Vue o Svelte
Tiene un visualizador de donde podremos observar y manipular máquinas de estados

📌 **RESUMEN:**  XState es una librería que te ayuda a crear máquinas de estados y se puede utilizar con diferentes tecnologías web. Aparte contiene un visualizador donde puedes observar y manipular máquinas de estados.

Javier Ceferino Rodriguez

student•

XState Visualizer está buenísimo! Repliqué la rutina para preparar mates (obviando algunos pasos para no entrar en detalles). Dejo el código:

import { createMachine, assign } from 'xstate';

interface Context {
  retries: number;
}

const fetchMachine = createMachine<Context>({
  id: 'drink_mate',
  initial: 'mate',
  context: {
    retries: 0
  },
  states: {
    mate: {
      on: {
        FILL_YERBA: 'mate_yerba'
      }
    },
    mate_yerba: {
      on: {
        FILL_HOT_WATER: '🧉',
        FILL_COLD_WATER: '😵'
      }
    },
    '🧉': {
      type: 'final'
    },
    '😵': {
      on: {
        'HEAT_WATER': {
          target: 'mate_yerba',
          actions: assign({
            retries: (context, event) => context.retries + 1
          })
        }
      }
    }
  }
});

Harrison Hipolito Mendoza Ortiz

student•

Xstate es gratuito en su totalidad.

David Vega Varela

student•

es software libre

Harrison Hipolito Mendoza Ortiz

student•

gracias compañero

Harold Zurita Simon

student•

Es una librería e interprete que nos ayuda a manejar máquina de estado en diferentes tecnologías. Básicamente ellos construyeron una base que nosotros luego podemos implementar usando Typescript, React, Vue y muchas otras cosas para manejar máquinas de estado dentro de nuestros proyectos.

También tienen un visualizer, una página donde nosotros podemos diagramar máquinas de estado e interactuar con ellas mientras las vamos dibujando.

Este es el link del visualizer:

Aquí podemos pegar el objeto de nuestra máquina de estado e irlo armando.

import { createMachine, assign } from 'xstate';

const fileMachine = createMachine({
  id: 'archivos',
  initial: 'inicial',
  states: {
    inicial: {
      on: {
        INIT_UPLOAD: { target: 'cargando'}
      }
    },
    cargando: {
      on: {
        UPLOAD_COMPLETE: { target: 'terminado'}
      }
    },
    terminado: {
      on: {
        RESTART: { target: 'inicial' }
      }
    }
  }
})

Tenemos un estado inicial, que en este caso se llama initial , y tenemos un listado de estados que son los posibles estados en los que puede estar mi máquina. Dentro de cada uno de estos estados tenemos al atributo o propiedad On , que la usamos para declarar los eventos que puede recibir ese estado.

Entonces si yo estoy inicial yo sé que puedo hacer un INIT UPLOAD , si estoy en cargando , puedo hacer un UPLOAD COMPLETE .

Luego de armar el objeto de la máquina y tenemos una idea de cómo debe funcionar, le damos al botón de Visualize y nos lo va a cargar en un diagrama de estados. Lo genial de este diagrama de estados es que es interactivo.

Si nos fijamos ahorita está en el estado inicial , que es el que tiene el borde azul, y la transición que está habilitada, que podemos hacer estando en ese estado es el INIT_UPLOAD . Si le damos podemos ver cómo la visualización del diagrama se mueve a mostrar el siguiente estado que es cargando y me muestra la opción de UPLOAD_COMPLETE para seguirme moviendo a través de nuestra máquina de estado.

Esto funciona muy bien cuando estamos empezando a armar nuestra máquina, que solo sabemos un poco del flujo que queremos tener, pero no tenemos claro los eventos o las transiciones. Esto nos ayuda muchísimo a verlo de una manera gráfica.

Además de eso, es muy útil para debugging si luego metemos más estados mientras estamos programando y no se sabe qué se rompió, podemos traerlo por acá y ver dónde se está rompiendo la máquina.

Stiven Castillo Montero

student•

INIT_UPLOAD, UPLOAD_COMPLETE, ... son las acciones que se pueden disparar según es estado actual.

Juan Camilo Lentino Villalba

student•

Es una librería e interprete para trabajar con maquinas de estado y diagramas de estado. puede usarse con React, vue o Svelte. . código de visualizador:

import { createMachine } from 'xstate';

const fileMachine = createMachine({
  id: 'archivos',
  initial: 'initial',
  states: {
    initial: {
      on: {
        INIT_UPLOAD: { target: 'cargando'}
      }
    },
    cargando: {
      on: {
        UPLOAD_COMPLETE: { target: 'terminado'}
      }
    },
    terminado: {
      on: {
        RESTART: { target: 'initial' }
      }
    }
  }
})

Juan Diego Mejia Maestre

student••

🛠️ XState: Lógica de Actor y Máquinas en Código

XState es la biblioteca estándar de la industria para JavaScript y TypeScript que permite crear, interpretar y ejecutar máquinas de estado finitas y diagramas de estado. Es la herramienta que convierte la lógica compleja en algo predecible.

🚀 ¿Qué es XState?

A diferencia de otros gestores de estado, XState se basa en la lógica declarativa:

Orquestación Completa: No solo guarda datos, sino que controla cuándo y cómo se puede cambiar de un estado a otro.
Modelo de Actores: En su versión más reciente (v5), permite que diferentes máquinas o procesos (actores) se comuniquen entre sí enviando mensajes.
Compatibilidad Total: Funciona con cualquier framework (React, Vue, Angular) o incluso en Vanilla JS y Node.js.

🎨 XState Visualizer (Stately Viz)

Es el compañero visual de XState. Es una herramienta en la web que transforma tu código en un diagrama interactivo.

Simulación en Vivo: Puedes disparar eventos manualmente y ver cómo la máquina "salta" de un estado a otro.
Generación Automática: No dibujas el diagrama; escribes el código y el Visualizer lo dibuja por ti.
Inspección de Estado: Permite ver qué datos (contexto) tiene la máquina en cada momento del proceso.

💎 Beneficios Clave

Adiós a los estados imposibles: Evita errores lógicos donde, por ejemplo, una aplicación intenta "Cargar" y "Mostrar Error" al mismo tiempo.
Documentación Real: El diagrama del Visualizer sirve como documentación técnica siempre actualizada para el equipo.
Testing Facilitado: Al ser una máquina matemática, es mucho más fácil escribir pruebas automáticas para todos los caminos posibles.

📌 Dato Importante: XState es especialmente útil en flujos donde el orden de los pasos es crítico, como procesos de pago, formularios de varios pasos o sistemas de autenticación.

Jhordy Gavinchu

student•

Será que babel use esta libreria 🤔

Miguel Sosa

student•

En el examen, hay una pregunta "Son usados para representar una máquina de estados de manera gráfica" donde la opción "Visualizer" es incorrecta (lo cual en esta clase claramente dice lo contrario) y además el link del examen a "Repasar" lleva a la clase anterior, que no habla de esto, por lo que queda bastante confuso.

Miguel Sosa

student•

XState y Redux son herramientas para manejar el estado en aplicaciones, pero tienen enfoques diferentes.

XState utiliza máquinas de estado para describir estados y transiciones, lo que permite visualizar flujos y manejar lógica compleja de manera declarativa. Es ideal para situaciones con múltiples estados y transiciones, como formularios o procesos complejos.

Redux, por otro lado, es una biblioteca para manejar el estado global de aplicaciones. Utiliza un enfoque basado en acciones y reducers, lo que puede ser más adecuado para aplicaciones donde se requiere un simple flujo de datos unidireccional.

Ambas herramientas son poderosas, pero la elección depende de los requisitos específicos del proyecto y de la complejidad del estado que manejes.

Jorge Arias Argüelles

student•

Máquinas de estado: Modelos que representan los estados y transiciones de un sistema.
XState: Librería para manejar máquinas de estado en diversas tecnologías (TypeScript, React, Vue, etc.).
Visualizer: Herramienta para diagramar y visualizar máquinas de estado de manera interactiva.
Estado inicial: El primer estado de la máquina, donde comienza el proceso.
Transiciones: Cambios de un estado a otro en respuesta a eventos (ej. Init Upload).
Depuración: Uso del visualizador para identificar y corregir errores en el flujo de la máquina de estado.

Estos conceptos son fundamentales para implementar y gestionar máquinas de estado en tus proyectos.

César Palma

student•

Que es XState una alternativa mas para gestionar el estado en nuestras aplicaciones. Alternativa a Redux y cuando con React Context y hooks no te sea suficiente.

📌 **RESUMEN:**  XState es una librería que te ayuda a crear máquinas de estados y se puede utilizar con diferentes tecnologías web. Aparte contiene un visualizador donde puedes observar y manipular máquinas de estados.

import { createMachine, assign } from 'xstate';

interface Context {
  retries: number;
}

const fetchMachine = createMachine<Context>({
  id: 'drink_mate',
  initial: 'mate',
  context: {
    retries: 0
  },
  states: {
    mate: {
      on: {
        FILL_YERBA: 'mate_yerba'
      }
    },
    mate_yerba: {
      on: {
        FILL_HOT_WATER: '🧉',
        FILL_COLD_WATER: '😵'
      }
    },
    '🧉': {
      type: 'final'
    },
    '😵': {
      on: {
        'HEAT_WATER': {
          target: 'mate_yerba',
          actions: assign({
            retries: (context, event) => context.retries + 1
          })
        }
      }
    }
  }
});

import { createMachine, assign } from 'xstate';

const fileMachine = createMachine({
  id: 'archivos',
  initial: 'inicial',
  states: {
    inicial: {
      on: {
        INIT_UPLOAD: { target: 'cargando'}
      }
    },
    cargando: {
      on: {
        UPLOAD_COMPLETE: { target: 'terminado'}
      }
    },
    terminado: {
      on: {
        RESTART: { target: 'inicial' }
      }
    }
  }
})

import { createMachine } from 'xstate';

const fileMachine = createMachine({
  id: 'archivos',
  initial: 'initial',
  states: {
    initial: {
      on: {
        INIT_UPLOAD: { target: 'cargando'}
      }
    },
    cargando: {
      on: {
        UPLOAD_COMPLETE: { target: 'terminado'}
      }
    },
    terminado: {
      on: {
        RESTART: { target: 'initial' }
      }
    }
  }
}) 

Introducción a Xstate: Gestión de Máquinas de Estado Interactivas

Introducción a las máquinas de estado

Máquinas de Estado: Conceptos y Uso en React con Xstate

Conceptos Básicos de Diagramas de Estado y Transiciones

Introducción a Xstate: Gestión de Máquinas de Estado Interactivas

Diseño de Máquinas de Estado para Reservas de Vuelos

Machines 101

Creación de Proyecto React con Máquina de Estados XState

Propiedades y Métodos de XState: Manejo de Estados Avanzado

Tipos de Transiciones en Máquinas de Estados Finite

Implementación de Eventos y Transiciones en Máquinas de Estado

Machines 102

Implementación de Acciones en Máquinas de Estado Finito

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

Máquinas de Estado: Jerarquías y Paralelismo

Implementación de Servicios y Solicitudes HTTP en Proyectos

Validación de Pasajeros y Visualización en Ticket Final

Cierre

Despliegue de Proyectos en GitHub Pages paso a paso

Máquinas de Estado: Implementación en Proyectos Reales