No tienes acceso a esta clase

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

Estados

6/15
Recursos

Aportes 4

Preguntas 0

Ordenar por:

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

o inicia sesión.

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

🍃 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.

mi aporte!

  • 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.