Creando el bosquejo de nuestra máquina de estado

me gusta cómo va el curso hasta el momento, puesto que mis bases en el mundo de la programación se sustentan en la electrónica y la programación de sistemas embebidos, uno de ellos es el PLC, en el cual uno de sus 5 formas de programar según normativa el SFC (Sequence flow control) es muy similar a esto que se está viendo es verdaderamente fantástico...

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

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

Nuestro proyecto va a ser el flujo de apartar tickets en una aerolínea. La idea es que nosotros hagamos una búsqueda de vuelos que en realidad van a ser países, seleccionemos un país, luego de eso agreguemos a los pasajeros con los con ls que queremos volar y por último veamos el ticket impreso. Algunas consideraciones del proyecto son: * Se pueden agregar múltiples pasajeros. * En cualquier momento puedo cancelar la compra y volver al estado inicial. * Hay un listado de vuelos del cual seleccionar. ## **Mini-demo del proyecto** La página se llama `Book a fly` y este va a ser el `Welcome page` , es decir el estado inicial de nuestra máquina de estados.  Al dar a `Comenzar` tengo que pasar a la `página de buscar destino` y seleccionamos algún país.  Continuamos, vamos a agregar a nuestros pasajeros.  Al ir a pagar, se nos mostrará nuestro ticket con el destino y los pasajeros que van al destino. Podemos ponerle un tiempo para ver el ticket y que si ya pasó el tiempo entonces que se reinicie la máquina.  El otro flujo que vamos a hacer es que hay un botón de `cancelar` en la parte superior que nos permite regresar al estado inicial.  ## **Bosquejo** Para realizar el bosquejo de la máquina de estados vamos a usar el visualizer de XState.  ```js import { createMachine } from 'xstate'; const fetchMachine = createMachine({ id: 'buy plane tickets', initial: 'initial', states: { initial: { on: { START: "search", }, }, search: { on: { CONTINUE: "passengers", CANCEL: "initial", }, }, passengers: { on: { DONE: "tickets", CANCEL: "initial", }, }, tickets: { on: { FINISH: "initial", }, } } }); ```

Creo que no se han explicado bien los conceptos de entrada y de salida. Yo entiendo la entrada como un conjunto de eventos y la salida como un conjunto de transiciones o de estados visitados. Por ejemplo: Para la entrada entrada \[comenzar, continar, cancelar], daría la salida \[Inicial, Search, Passengers, Inicial]. ¿Ustedes que opinan?

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.