No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Estados

6/15
Recursos

¿Qué son las propiedades y cómo se manejan en XState?

Profundizar en el uso de las propiedades en XState es fundamental para mejorar nuestras habilidades en el manejo de máquinas de estado. En este apartado, desglosaremos las propiedades más relevantes como el value, context, event, action, activities, history, meta, y nextEvents.

¿Cuál es la función del value en una máquina de estado?

El value es una propiedad esencial en XState, ya que nos indica el estado actual de la máquina. Al iniciar, devuelve una cadena que corresponde al nombre del estado inicial. En situaciones más complejas, como cuando se tienen máquinas anidadas, el value se convierte en un objeto que representa los estados de las máquinas padre e hijo.

¿Qué es el contexto y cómo se utiliza?

El contexto en una máquina de estado es crucial para manejar datos que cambian durante la ejecución. Funciona como un almacenamiento para variables, objetos o arrays. Por ejemplo, en una máquina de estado que actúa como un contador, el contexto puede incluir la variable del contador que se modificará según las transiciones.

¿Qué papel desempeñan los eventos en XState?

Los eventos son fundamentales ya que representan las acciones o cambios que activan transiciones entre estados. Al imprimir un evento, se revela el último evento usado que provocó el cambio al estado actual.

¿Qué son las acciones y actividades?

Las action, son comandos que se ejecutan una sola vez cuando se transita a un estado. Por otro lado, las activities son tareas más permanentes que, aunque serán deprecadas, todavía se usan para ilustrar la ejecución continua de funciones, como invocar servicios.

¿Cómo opera el history en XState?

La propiedad history es invaluable cuando se necesita saber desde qué estado llegó un cambio actual, particularmente en situaciones donde se puede llegar a un estado desde varios otros, permitiendo validaciones más precisas.

¿Qué representa el meta en un estado?

Meta es una sección de metadatos que se asocia al estado, ideal para almacenar valores constantes como strings o números, sin importar los cambios que ocurran en los estados o transiciones.

¿Cómo funcionan los nextEvents?

La propiedad nextEvents devuelven un array con los eventos posibles desde el estado presente, proporcionando una visión clara de las acciones que se pueden ejecutar.

¿Qué métodos son clave para manejar los estados?

En el manejo de estados con XState, disponemos de métodos esenciales como matches y can, que nos ofrecen una inspección profunda en el comportamiento de nuestras máquinas de estado.

¿Cómo usar el método matches?

El método matches verifica si el estado actual coincide con un estado específico. Su importancia radica en permitir una comprobación robusta, especialmente en estructuras complejas con máquinas anidadas.

¿Para qué sirve el método can?

Can es un método que determina si un evento puede ejecutarse en el estado actual. Esto es crucial para evitar ejecutar transiciones inválidas, optimizando la ejecución de nuestra lógica.

Ejemplo de uso práctico

Para explorar estos métodos, se configuran con console.log en la consola para ver su uso:

console.log(state.matches('initial')); // Esperado: true
console.log(state.matches('tickets')); // Esperado: false
console.log(state.can('finish')); // Esperado: false

Al ejecutar, el primer log valida que estamos en el estado initial. El segundo demuestra un estado incorrecto, devolviendo false, mientras que el tercero confirma la imposibilidad de ejecutar el evento finish.

Implicaciones prácticas

Con el conocimiento adquirido, ahora podemos manipular y analizar los estados de manera efectiva, entendiendo no solo el estado actual y su historia, sino también las posibilidades futuras de transición. Esto nos prepara para sumergirnos en detalles más complejos sobre eventos y transiciones.

Aportes 7

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

🍃 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

mi aporte!

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
BaseLayout
; } 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.
  • El State es un objeto que lleva registro de la evolución de la maquina…
    Aunque no se si evolución por que el estado es definido pero digamos: el desarrollo.

    …básicamente nos dice el pasado, el presente y el futuro de la maquina.

`maches` permite o no obtener los valores del contexto? En el examen esta pregunta también está como incorrecta, no me termina de quedar claro.
- **Value**: Indica el estado actual de la máquina (ej. "inicial"). - **Context**: Información almacenada que puede cambiar (ej. contador). - **Event**: Nombre del evento que llevó al estado actual. - **Action**: Array de acciones que ejecuta el estado. - **Activities**: Actividades en progreso, más permanentes que acciones. - **History**: Estado anterior de la máquina. - **Meta**: Metadata permanente del estado. - **Next Events**: Eventos que pueden ejecutarse desde el estado actual. - **Methods**: - **Matches**: Verifica si se está en un estado específico. - **Can**: Verifica si se puede ejecutar un evento en el estado actual.