Estados

🍃 Estados

Apuntes

Propiedades de los estados

Value

• Indica el nombre del estado actual
• Cuando se tiene una máquina padre y esta tiene una máquina hija, este nombre del estado actual pasa de ser una cadena de texto a un objeto
  • Dicho objeto dice el estado tanto de la máquina padre como la máquina hija

Context

• Da el contexto del estado actual
• Nos permite guardar valores (Objetos, arrays, etc.)
• Es un pedazo de la máquina donde se va guardando y actualizando los valores

Event

• El nombre del evento anterior que nos trajo al estado actual

Action

• Es un array que contiene las acciones que ejecutan algún estado
• Son funciones de ejecutar y olvidar

Activities (⚠️ Deprecated)

• Listado de actividades indicando si están en progreso o no
• Las actividades a diferencia de las acciones (ejecutar y olvidar) son cosas más permanentes (Invocar un servicio, observable)

History

• Indica el estado anterior
• Se implementa cuando deseamos saber cuál fue el estado anterior en caso de condicionales

Meta

• Sección de metadata dentro del estado
• Nos permite poner valores asociados al estado, los cuales serán permanentes

NextEvents

• Es un array de los posibles eventos que podemos ejecutar a partir del estado actual

Métodos de los estados

• matches(nombre del estado) ⇒ Pasando el nombre de un estado nos responde si dicho estado es el actual o no
  • Nos ayuda a ver si estamos en un estado tanto de la máquina padre o hijo
• can(nombre del evento) ⇒ Pasando el nombre de un evento nos indica si podemos ejecutarlo

📌 **RESUMEN:** Xstate provee información útil del estado para manejar máquinas de estados, como saber si estamos en algún estado o para saber si podemos ejecutar algún evento.

Propiedades de las estados
Value: Indica el nombre del estado actual
Context: Da el contexto al estado actual
Event: El evento por el cual se llego al estado actual
Action: Un array de acciones a ejecutar en ese estado
Activities: Listado de actividades indicando si están en progreso o no
History: Indica el estado anterior
Meta: Los metadatos asociados al estado
NextEvents: Los posibles eventos a ejecutar partiendo del estado que nos encontremos
.
Metodos del estado
matches(nombre del estado)
can(nombre del evento)
.
src/Components/BaseLayout.js:

import React from 'react';
import { useMachine } from '@xstate/react';
import bookingMachine from '../Machines/bookingMachine';

export const BaseLayout = ()=> {
    const [state,send] = useMachine(bookingMachine)

    console.log('state machine', state)
    console.log('matches(initial): ', state.matches('initial')) // true 
    console.log('matches(tickets): ', state.matches('tickets')) // false 
    console.log('can(START): ', state.can('START')) // true 
    console.log('can(FINISH): ', state.can('FINISH')) // false 

    return (
        <div>State Machine</div>
    )
}

CONSOLA:
matches(initial): true
matches(tickets): false
can(START): true
can(FINISH): false

Vamos a hablar sobre las propiedades y métodos de XState. ## **Propiedades** * **Value:** Indica el nombre del estado actual. Nos dice en qué momento está actualmente la máquina de estado. Es decir, me da el nombre del estado. Entonces, en nuestro ejemplo, en el que solo hemos iniciado la máquina y estaba en el estado `inicial` , este value nos va a retornar un string que va a decir `inicial` . Si tenemos una máquina dentro de otra entonces este string se convierte en un objeto. Entonces, el objeto nos dice, en qué estado está la máquina padre en qué estado está la máquina hija. * **Context:** Es una parte del estado y es algo que nosotros podemos manejar dentro de nuestras máquinas que nos permite guardar valores, objetos y arrays. Por ejemplo, en un contador el contexto contendría la variable `contador` y esta la iríamos modificando para sumarle 1 en los estados o transiciones que sea necesario. Entonces, el contexto es básicamente ese pedazo del estado y de la máquina donde podemos guardar información que va a estar cambiando. * **Evento:** El evento por el cual se llegó al estado actual. Por ejemplo, si yo estaba en el estado inicial, llamé al evento a `estar` y pasé al estado de `búsqueda` , cuando yo en el estado de búsqueda imprima el evento me va a decir que era `estar` , porque ese fue el evento a través del cual se llegó a ese estado. * **Action:** Un array de acciones a ejecutar en ese estado. * **Actividades:** Listado de actividades indicando si están en progreso o no. A diferencia de las acciones, las actividades no son solo de ejecutar y olvidar, sino que son cosas más permanentes. Por ejemplo, invocar un servicio, un observable o algo de ese estilo. * **History:** Indica el estado anterior. Es util por ejemplo si a un estado podemos llegar desde otros 2 estados. Entonces, si necesitamos saber desde cúal de esos dos llegó, podemos usar el history para hacerlo. * **Meta:** Los metadatos asociados al estado. Eseta sección nos permite ponerle valores al estado, como strings, n+umeros o lo que sea, que son permanentes. * **nextEvents:** Lo que nos da es un array de los posibles eventos que podemos ejecutar a partir del estado en el que estamos. Entonces, si yo esroy en el estado de `búsqueda` y puedo ejecutar `continuar` y `cancelar` , este `nextEvent` para el estado de búsqueda, nos va retornar un array que contenga `continuar` y `cancelar`. ## **Métodos** * **Matches (nombre del estado):** Nos va a decir si ese es el estado actual o no. * **Can (nombre del evento):** Nos va a decir si podemos ejecutar o no dentro del estado en el que estamos. El hecho de diagramar el flujo y de definir las transiciones que se pueden hacer entre un estado y otro, hacen que por naturaleza se bloqueen las transiciones inválidas. Entonces, por ejemplo, si yo estoy en el estado inicial y le quiero dar el evento de `finalizar` , siendo ese un evento que no tiene sentido de acorde a donde se encuentra el estado actualmente, entonces la máquina simplemente no va a ejecutar nada. Con este método lo que podemos hacer es verificar si de verdad algo se puede ejecutar o no antes de hacer el llamado. ## **En código** ```js import React from "react"; import { useMachine } from "@xstate/react"; import bookingMachine from "../Machines/bookingMachine"; function BaseLayout() { const [state, send] = useMachine(bookingMachine); console.log("Nuestra máquina", state); console.log("Matches true", state.matches("initial")); console.log("Matches false", state.matches("tickets")); console.log("Can", state.can("FINISH")); return ; } export { BaseLayout }; ``` Vemos que están presentes las propiedades mencionados previamente, nuestro `value` se encuentra en `initial` . En el array de `nextEvents` nos dice que entre las posibilidades de eventos que podemos llamar está solamente `START` . En la consola podemos los resultados del `matches` donde le preguntabamos si el estado actual era el `inititial` , lo cual nos dio que es `true`. También le pasabamos `tickets` como si fuera el estado actual y la respuesta fue `false` . Finalmente, en el `can` le preguntabamos si podíamos ejecutar el evento de `FINISH` , lo cual nos dio `false` porqué ese no es uno de los eventos permitidos en el estado actual.