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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Diseño de Máquinas de Estado para Reservas de Vuelos
4/15¿Cómo crear una máquina de estados para una aerolínea?
Crear una máquina de estados ofrece una estructura clara y organizada para gestionar los flujos complejos de una aplicación. En este ejemplo, desarrollaremos un flujo para la reserva de tickets en una aerolínea. Aquí te mostramos cómo hacerlo de manera efectiva utilizando el visualizer de XState.
¿Cuál es el flujo de la aplicación?
El flujo de la aplicación contempla varias etapas clave para completar el proceso de reserva de tickets:
- Buscar vuelos (seleccionar país): Selecciona un país de destino disponible.
- Agregar pasajeros: Añade los pasajeros con los que vas a viajar.
- Ver ticket impreso: Se muestra un ticket con el destino y los pasajeros.
Consideraciones del proyecto
- Se pueden agregar múltiples pasajeros.
- Existe la opción de cancelar el flujo en cualquier momento y regresar al inicio.
- Los destinos son representados por países.
¿Cómo se estructura la máquina de estados?
La máquina de estados se compone de varios estados y transiciones definidos claramente. A continuación se describe cómo estructurarla.
// Configuración básica de la máquina de estados
const machine = {
id: 'comprar_tickets',
initial: 'inicial',
states: {
inicial: {
on: {
start: 'search'
}
},
search: {
on: {
continuar: 'passengers',
cancelar: 'inicial'
}
},
passengers: {
on: {
done: 'tickets',
cancelar: 'inicial'
}
},
tickets: {
on: {
finish: 'inicial'
}
}
}
};
Estados
- Inicial: Es la página de bienvenida y el punto de partida.
- Search: Aquí el usuario selecciona el destino.
- Passengers: Se añaden todos los datos de los pasajeros.
- Tickets: Se visualizan los detalles del ticket final.
¿Cómo se implementan las transiciones?
Las transiciones permiten moverse de un estado a otro mediante eventos específicos:
- Start: Del estado
inicialalsearch. - Continuar: Del
searchapassengers. - Cancelar: Desde cualquier estado retornando a
inicial. - Done: De
passengersatickets. - Finish: De
ticketsde vuelta ainicial.
¿Cómo ejecutar la máquina de estados?
Para visualizar y probar la máquina de estados, utiliza el visualizer de XState:
- Define el objeto base con un
IDy el estado inicial. - Añade los estados e implementa cada transición.
- Usa
visualizepara actualizar y verificar que las rutas son correctas.
¿Qué sigue después de definir la máquina de estados?
¡Felicidades! Ahora que has bosquejado tu máquina de estados, es hora de implementarlo en un entorno de desarrollo real. En la próxima fase, llevaremos todo este aprendizaje al código y crearemos una aplicación funcional que utilice esta estructura. ¡Animate y sigue profundizando en el fascinante mundo del desarrollo!
Aportes 13
Preguntas 1
Yo en mi caso preferí agregar un estado adicional llamado “Thanks”, porque en el estado Tickets debería haber la opción de culminar la compra o cancelar todo. En conclusión, me quedó así:
const fetchMachine = createMachine({
id: "buy plane tockets",
initial: "home",
states: {
home: {
on: {
START: "search",
},
},
search: {
on: {
CONTINUE: "passengers",
CANCEL: "home",
},
},
passengers: {
on: {
DONE: "tickets",
CANCEL: "home",
},
},
tickets: {
on: {
BUY: "thanks",
CANCEL: "home",
},
},
thanks: {
on: {
FINISH: "home",
},
},
},
});
En esta clase faltó mencionar que el mismo valor con el que definas “initial”, debes inicial el flujo de estados.
En el ejemplo de la clase, Estefany usó:
initial: “inicial” (línea 5)
y luego:
states: {
initial: {
}
}
Código visualizador:
import { createMachine } from 'xstate';
const bookingMachine = createMachine({
id: 'buy plane tickets',
initial: 'initial',
states: {
initial: {
on: {
START: 'search'
}
},
search: {
on: {
CONTIUNE: 'passengers',
CANCEL: 'initial'
}
},
passengers: {
on: {
DONE: 'tickets',
CANCEL: 'initial'
}
},
tickets: {
on: {
FINISH: 'initial'
}
},
}
})
Yo soy ingeniero electrónico y en el curso de electrónica digital me enseñaron este concepto de maquinas de estado finito el cual goze como no tienen idea. Todo el curso de electronica digital fue sistemas binarios, circuitos digitales, logica, sencuencia y el tema final este. Me resulta super ameno como lo esta enseñando la profesora y aun más grato poder recordar y aplicar estos conceptos.
https://stately.ai/registry/new aqui se puede realizar la practica muy parecido a psint
El estado es como un flujo de agua que va recorriendo las tuberías de la maquina de estado.
Solo que ese flujo es a la velocidad de la luz.
Esto resuena mucho como la interpretación de los diagramas de flujo.
Excelente curso. Muchas gracias, me gusta
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?