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

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

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

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.