Acciones

💃 Acciones

Ideas/conceptos claves

Accion

Es una función que se ejecuta cuando estamos dentro de un estado

Apuntes

• Una acción puede ser:
  • De entrada
    • Se disparan cuando entramos a un nuevo estado
  • De salida
    • Se disparan cuando salimos de un estado
  • Durante una transición
    • Se invoca cuando estamos en proceso o terminando una transición
• Las acciones cuando las invocamos se llaman una sola vez y finaliza

lo que entendí de la case

Podemos implementar acciones cuando se hace el cambio de un estado a otro, estas acciones pueden ser:

• De entrada
• De salida
• Durante una transición

creamos estas acciones pasándole como segundo parámetro a createMachine un objeto con una propiedad actions la cual contiene un objeto con las funciones o acciones que deseamos implementar

const bookingMachine = createMachine( {... }, {
  actions: {
    printTransition: ()=> console.log('transition'),
    printTransitionTwo: ()=> console.log('transition two'),
    printEntry: ()=> console.log('entry'),
    printExit: ()=> console.log('exit')
  }
})

lo implementamos pasándole nuevas propiedades a los estados
.
.
sea una acción de entrada:

search: {
  entry: 'printEntry', // de entrada 
  on: {
    CONTINUE: "passengers",
    CANCEL: "initial",
  },
}

de salida:

search: {
  exit: 'printExit', // de salida 
  on: {
    CONTINUE: "passengers",
    CANCEL: "initial",
  },
}

o durante una transición pasándole como parámetro al estado un objeto con una propiedad target que contiene el nombre del siguiente estado, y una propiedad actions que contiene la acción a ejecutar

initial: {
  on: {
    START: { 
      target: 'search', // siguiente estado
      actions: 'printTransition' // accion a ejecutar 
    },
  },
}

o acciones pasándole como parámetro a la propiedad actions un array con las acciones que deseamos ejecutar

initial: {
  on: {
    START: { 
      target: 'search',
      actions: ['printTransition', 'printTransitionTwo'] // acciones a ejecutar 
    },
  },
}

para los que quieran utilizar una lista con todos los paises.

import React, { useState, useEffect } from 'react';
import './Search.css';

export const Search = ({ send }) => {
  const [flight, setFlight] = useState('');
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    // Obtener la lista de países desde la API de REST Countries
    fetch('https://restcountries.com/v3.1/all')
      .then(response => response.json())
      .then(data => {
        const countryNames = data.map(country => country.name.common);
        setCountries(countryNames);
      })
      .catch(error => console.error('Error fetching countries:', error));
  }, []);

resto del codigo…

Me viene un ejemplo de poder hacer un step progress bar para un form de registro o como este caso, una compra.

Buena!!