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.

    鈥谩sicamente nos dice el pasado, el presente y el futuro de la maquina.