Las actions en XState son funciones que se ejecutan una sola vez dentro de una máquina de estados, ya sea al entrar a un estado, al salir o durante una transición. Aprender a usarlas te permite disparar lógica puntual como llamadas a un endpoint, envíos al backend o actualizaciones del contexto, sin romper la pureza de tu máquina.

¿Qué son las actions y cuándo se ejecutan?

Una action es un fragmento de código que corre una vez y termina. Lo interesante es el momento en que se dispara, porque ese detalle define cómo la usas en tu aplicación.

Existen tres momentos clave para ejecutar una action:

• De entrada (entry): se dispara al entrar a un nuevo estado. Útil cuando quieres, por ejemplo, hacer un request a un endpoint para traer una lista de países justo cuando entras al estado search.
• De salida (exit): se ejecuta justo antes de abandonar el estado. Imagina un formulario con datos personales: al salir, haces un post al backend para enviar la información.
• Durante una transición: corre mientras pasas de un estado a otro. Aquí puedes actualizar el contexto de la máquina o registrar eventos.

¿Cuántas veces se ejecuta una action? Solo una. Cada vez que entras, sales o transicionas, la action corre una sola vez y termina. No queda escuchando ni se repite.

¿Cómo defino una action durante una transición?

La primera action la vamos a montar en la transición del evento start, que lleva del estado welcome al estado search. En lugar de dejar el destino como un string, lo conviertes en un objeto con dos propiedades: target y actions.

js on: { start: { target: "search", actions: "imprimirInicio" } }

Con esto le dices a la máquina: cuando se dispare start, ve a search y, durante esa transición, ejecuta la action llamada imprimirInicio.

¿Dónde se implementa la función de la action?

Aquí viene un detalle que suele tropezar a quienes empiezan. Las funciones de las actions no van dentro de states, van en un segundo objeto que se pasa a la máquina, fuera del objeto de configuración inicial.

js { // configuración de la máquina (states, etc.) }, { actions: { imprimirInicio: () => console.log("imprimirInicio") } }

Si la pones dentro de states, vas a ver el error "no se encontró la implementación del action type imprimirInicio". Sácala al segundo objeto y todo funciona.

¿Cómo declaro actions de entrada y salida en un estado?

Dentro del estado search, antes del bloque on, agregas las propiedades entry y exit. Cada una recibe el nombre de la action que se va a ejecutar en ese momento.

js search: { entry: "imprimirEntrada", exit: "imprimirSalida", on: { // eventos del estado } }

Luego, en el bloque de actions del segundo objeto, defines ambas funciones:

• imprimirEntrada: hace console.log("Imprimir entrada a search").
• imprimirSalida: hace console.log("Imprimir salida del search").

¿Cuál es la diferencia entre entry y exit? Entry corre al entrar al estado, exit corre al salir. Son ideales para inicializar datos al llegar y limpiar o enviar información al irte.

¿En qué orden se ejecutan las actions?

Al probar la máquina en el navegador y disparar el evento start, el orden que ves en consola es revelador:

1. imprimirInicio, durante la transición de welcome a search.
2. imprimirEntrada, al entrar al estado search.
3. imprimirSalida, cuando eliges un país y sales de search.

Ese orden te confirma que las actions de transición corren entre estados, las de entry al aterrizar y las de exit justo antes de partir.

¿Para qué sirven las actions en un proyecto real?

Más allá de un console log, las actions son la puerta de entrada para conectar tu máquina con el mundo exterior. Con ellas puedes llenar un listado de países, enviar formularios al backend o actualizar el contexto interno para que otros estados reaccionen.

La pieza que falta es el contexto, ese espacio donde la máquina guarda datos que cambian con el tiempo. Cuando combinas actions con contexto, tu máquina de estados deja de ser un diagrama estático y se convierte en una herramienta capaz de manejar lógica compleja con muy poco código.

¿Ya tienes claro en qué momento usarías una action de entry en lugar de una de transición? Cuéntame tu caso en los comentarios.