Jerarquías y máquinas paralelas

Curso de State Machines en React.js

Introducción a las máquinas de estado

¿Qué son las máquinas de estado en React.js?

Fundamentos de las máquinas de estado

¿Qué es XState?

Creando el bosquejo de nuestra máquina de estado

Machines 101

Declarar la maquina de estados

Estados

Eventos y transiciones

Implementando los eventos y transiciones

Machines 102

Acciones

Contexto

Jerarquías y máquinas paralelas

Servicios

Últimos detalles del proyecto

Cierre

Bonus class: deploy

Clase de cierre

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿Qué son las jerarquías en las máquinas de estado?

En el emocionante mundo de la programación de máquinas de estado, las jerarquías ofrecen una forma poderosa de estructurar tus sistemas. Las jerarquías permiten a las máquinas de estado tener "máquinas hijas" que funcionan dentro de una "máquina más grande". Imagina un sistema, como un perro que puede estar dormido o despierto. La máquina primaria controla este comportamiento general; sin embargo, su estado "despierto" es más complejo. Este estado "despierto" puede tener sub-estados, como "jugando" o "comiendo".

Para ejemplificar esto en un entorno real, podemos ver cómo dentro de un componente React, se utilizan jerarquías para manejar diferentes estados:

const stateMachine = {
  id: 'dog',
  initial: 'asleep',
  states: {
    asleep: {},
    awake: {
      initial: 'playing',
      states: {
        playing: {},
        eating: {},
      },
    },
  },
};

Este enfoque modular hace que tu código sea mucho más manejable y sostenible. Implementar jerarquías en tu máquina de estado permite mantener la lógica clara y separada, facilitando la ubicación de posibles errores o futuras modificaciones.

¿Cómo se implementa el paralelismo en las máquinas de estado?

El paralelismo transforma el manejo de las máquinas de estado en un sistema aún más versátil. Cuando hablamos de paralelismo, nos referimos a la ejecución simultánea de múltiples máquinas independientes, que actúan como si estuvieran "una al lado de la otra". Cada máquina opera independientemente, y las transiciones en una no afectan a las otras.

Considera un sistema de archivos que maneja tanto la descarga como la carga de documentos. Ambas operaciones pueden ocurrir de manera simultánea sin interferencias:

const fileOperations = {
  type: 'parallel',
  states: {
    download: {
      initial: 'idle',
      states: {
        idle: {},
        downloading: {},
        completed: {},
      },
    },
    upload: {
      initial: 'idle',
      states: {
        idle: {},
        uploading: {},
        completed: {},
      },
    },
  },
};

Este enfoque es sumamente útil en situaciones como la gestión de descargas y subidas de archivos, asegurando que cada tarea progrese de manera fluida sin depender una de la otra. Además, los sistemas paralelos son perfectos para modelar comportamientos simultáneos en entornos dinámicos como la interacción de un personaje en un videojuego o la operación de un robot.

¿Cómo crear una máquina de estado con jerarquías y paralelismo?

Ventajas como la capacidad de escalar aplicaciones y procesar múltiples estados han convertido a las jerarquías y el paralelismo en herramientas valiosas para los desarrolladores. Veamos un ejemplo sencillo para ilustrar cómo implementar estos conceptos en código:

Implementación de Jerarquías

Decidir qué partes del sistema beneficiarán de la jerarquía es clave. Un sistema de búsqueda que tiene estados de "cargando", "éxito" y "fallo" puede estructurarse de esta manera:

const searchMachine = {
  id: 'search',
  initial: 'idle',
  states: {
    idle: {},
    searching: {
      initial: 'loading',
      states: {
        loading: {},
        success: {},
        failure: {},
      },
    },
  },
};

Implementación de Paralelismo

Para procesos que deben ocurrir simultáneamente, como verificar actualizaciones mientras se mantienen interacciones disponibles:

const application = {
  type: 'parallel',
  states: {
    updateCheck: {
      initial: 'idle',
      states: {
        idle: {},
        checking: {},
        finished: {},
      },
    },
    userInteraction: {
      initial: 'available',
      states: {
        available: {},
        interacting: {},
        finished: {},
      },
    },
  },
};

El uso estratégico de jerarquías y paralelismo transforma la manera en que los sistemas son diseñados e implementados, permitiendo a los desarrolladores gestionar la complejidad de manera eficiente. Este enfoque no solo mejora la organización y la claridad del código, sino que también optimiza el flujo de trabajo en proyectos de desarrollo software más grandes y complejos.

Es fascinante imaginar cómo el uso de estas técnicas puede ampliar el alcance de tus proyectos. ¡Sigue explorando y descubriendo nuevas maneras de enriquecer tus desarrollos con estas herramientas poderosas!

Aportes 7

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Fernando Quinteros Gutierrez

hace 3 años

🗂️ 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

Diego Reyes Cabrera

hace 2 años

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?

Juan Camilo Lentino Villalba

hace 3 años

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: {} 
      }
    }
  }
})

Diego Reyes Cabrera

hace 2 años

Documentación de estos dos temas:

Bryan David Castañeda Aranzales

hace 3 años

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

Matias Peressutti

hace 3 años

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

Williams Munguía

hace 9 meses

soy al único que tiene problemas constantes con el código, unas veces funcionan otras no, como que el codigo se glicha y aveces no las actions no se disparan o se disparan pero no hacen los cambios en el contexto.