¿Qué es XState?

❎¿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.

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
          })
        }
      }
    }
  }
});

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: <https://stately.ai/viz> Aquí podemos pegar el objeto de nuestra máquina de estado e irlo armando. ```js 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.

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' }
      }
    }
  }
})