Jerarquías y máquinas paralelas

🗂️ Jerarquías y máquinas paralelas

Apuntes

• Se puede crear varias máquinas a la vez y darles comunicación entre sí para poder crear flujos más complejos

• Las jerarquías dentro de las máquinas de estados, nos permiten tener máquinas hijas dentro de una máquina más grande

• Principalmente, podemos encontrar una jerarquía cuando una máquina de estados en un estado tendrá otra máquina de estados

Máquinas paralelas

• Son dos máquinas, una máquina al lado de otra, pero lo que pasa en cada una no afecta a la otra

Siento que faltó algo más de contexto sobre este tema, o al menos algunos ejemplos reales…

.
Se me ocurre que podría implementar una jerarquía en una app ecommerce, donde podamos abrir un modal que muestre todos los productos del carrito con sus respectivas opciones. Entonces la máquina sería algo así:

• La máquina padre tendría varios estados como Ver productos, Ver carrito de compras, Ingresar datos de pago, etc.
• El estado de Ver carrito de compras sería una máquina hijo, que internamente tiene otros estados como ver detalles de cada producto, eliminar el producto, etc.
• Al ser una máquina hijo, no importa en qué proceso estemos, podemos cerrar el modal en cualquier momento y seguir con la máquina padre.

.
¿Alguien podría complementar mi idea o dar ideas nuevas?

Visualizador: https://stately.ai/viz
.
.
Jerarquía de maquinas de estado

import { createMachine, assign } from "xstate";

const fillCountries = {
  initial: 'loading',
  states: {
    loading: {
      on: {
        DONE: 'success',
        ERROR: 'failure'
      }
    },
    success: {},
    failure: {
      on: {
        RETRY: { target: 'loading'}
      }
    }
  }
}

const bookingMachine = createMachine({
  id: "buy plane tickets",
  initial: "initial",
  context: {
    passengers: [],
    selectedCountry: '',
  },
  states: {
    initial: {
      on: {
        START: { 
          target: 'search',
        },
      },
    },
    search: {
      on: {
        CONTINUE: {
          target: 'passengers',
          actions: assign({
            selectedCountry: (context, event) => event.selectedCountry
          })
        },
        CANCEL: 'initial',
      },
      ...fillCountries,
    },
    tickets: {
      on: {
        FINISH: "initial",
      },
    },
    passengers: {
      on: {
        DONE: "tickets",
        CANCEL: {
          target: 'initial',
          actions: assign({
            selectedCountry: (context, event) => event.selectedCountry,
            passengers: (context, event) => event.passengers
          })
        },
        ADD: {
          target: 'passengers',
          actions: assign(
            (context, event)=> context.passengers.push(event.newPassenger) 
          )
        }
      },
    },
  },
}, 
);

export default bookingMachine;

Maquinas paralelas

import { createMachine, assign } from "xstate";


const fileMachine = createMachine({
  id: 'archivos',
  type: 'parallel',
  states: {
    upload: {
      initial: 'inicial',
      states: {
        inicial: {
          on: {
            INIT_UPLOAD: { target: 'cargando' }
          }
        },
        cargando: {
          on: {
            UPLOAD_COMPLETE: { target: 'terminado' }
          }
        },
        terminado: {}
      }
    },
    download: {
      initial: 'inicial',
      states: {
        inicial: {
          on: {
            INIT_DOWNLOAD: { target: 'cargando' }
          }
        },
        cargando: {
          on: {
            DOWNLOAD_COMPLETE: { target: 'terminado' }
          }
        },
        terminado: {} 
      }
    }
  }
})

Documentación de estos dos temas:

• Jerarquías
• Máquinas Paralelas

Realmente el curso ha sido bueno pero en este apartado si les fue mal, hablaron de estos temas muy por encima.

Me tira el siguiente error:
TypeError: Cannot read properties of undefined (reading ‘context’)
at Passengers