Implementación de Acciones en Máquinas de Estado Finito

Clase 9 de 15Curso de State Machines en React.js

Resumen

¿Qué son las acciones en una máquina de estados?

Las acciones en las máquinas de estados son funciones que se ejecutan durante ciertos momentos clave dentro de la transición de estados. Estas pueden ser disparadas al entrar o salir de un estado, o incluso durante la transición misma. Lo particular de las acciones es que se ejecutan una sola vez cuando se disparan, concluyendo inmediatamente después.

¿Cómo funcionan las acciones de entrada?

Las acciones de entrada se ejecutan cuando se ingresa a un nuevo estado. Por ejemplo, al ingresar a un estado llamado "search", podrías necesitar realizar una búsqueda de posibles países mediante un endpoint. En este caso, podrías ejecutar una acción de entrada que haga el request necesario para obtener esos países.

¿Qué son las acciones de salida?

Las acciones de salida, por otro lado, se disparan antes de cambiar de estado. Imagina un formulario donde un usuario ingresa sus datos personales. Antes de cambiar al siguiente estado, puedes ejecutar una acción de salida que envíe estos datos al backend a través de un endpoint. Esto asegura que la información se procese antes de que cambie el estado de la aplicación.

Implementación de acciones en el código

Implementar acciones en una máquina de estado implica definir cuándo y cómo se ejecutan. A continuación, se describe cómo hacerlo con un ejemplo práctico.

¿Cómo definir una acción durante la transición?

Para crear una opción que se ejecute durante una transición, primero debemos modificar el evento de inicio. Cambiamos nuestro target actual por un objeto que incluya la acción a ejecutar:

// Cambio del target a un objeto con acciones
const target = {
  target: 'search',
  actions: 'imprimirInicio'
};

Esa imprimirInicio debería estar definida como una función que registre un console.log que muestre "imprimir inicio". Nos aseguramos de ubicar esta función fuera de los states de nuestra máquina:

const actions = {
  imprimirInicio: () => console.log('Imprimir inicio')
};

¿Cómo definir acciones de entrada y salida para un estado?

Para definir acciones de entrada y salida, las declaramos dentro del estado, antes de la sección on. Así, para el estado "search", podríamos definirlas como sigue:

const search = {
  entry: ['imprimirEntrada'],
  exit: ['imprimirSalida']
};

Estas acciones se ajustan a funciones que deben ser creadas adecuadamente:

const actions = {
  imprimirEntrada: () => console.log('Imprimir entrada a search'),
  imprimirSalida: () => console.log('Imprimir salida del search')
};

Consejos prácticos para implementar acciones

  • Estructura de código clara: Asegúrate de que las acciones y funciones correspondientes están bien ubicadas fuera de los objetos de estado principal para evitar errores.
  • Pruebas y validaciones: Después de implementar una acción, prueba tu máquina de estado y verifica que los logs se ejecuten como se espera.
  • Mantenimiento y escalabilidad: Organiza las funciones y acciones de manera modular para facilitar la modificación o expansión de la funcionalidad.

Con estos conceptos, ya tienes una base sólida para implementar y utilizar acciones en tus máquinas de estado en JavaScript. ¡Continúa explorando e implementando más casos para consolidar tu aprendizaje! Te esperamos en la próxima clase para adentrarnos en el contexto y su relación con las acciones.