⌘ REFERENCIA · 27 elementos
Cheatsheet de Máquinas de Estado
FSM, statecharts y XState en un sitio: estados, transiciones, actores, testing y visualización.
🔀 Conceptos 5
Estados finitos, eventos, transicionesFSM
FSM + jerarquía, paralelismo e historiastatechart
Determinista y no deterministaDFA / NFA
Salida en la transición o en el estadoMealy / Moore
El estándar W3C que sigue XStateSCXML
⚙️ XState: máquina 7
Declarar antes de la máquina (v5)setup({ types, actions, guards, actors })
Definir la máquinacreateMachine({ initial, states })
Transición por eventoon: { EVENTO: { target } }
Estado extendido (datos)context
Actualizar el contextassign({ … })
Transición condicionalguard: "puede"
Acciones al entrar y salirentry / exit
🪆 Estructura 5
Estado compuesto (jerarquía)states anidados
Regiones ortogonales activas a la veztype: "parallel"
Volver al subestado anteriortype: "history"
Terminar y avisar al padretype: "final" + onDone
Comprobar estado anidadostate.matches("a.b")
🎭 Actores 5
Ejecutar la máquinacreateActor(machine).start()
Actor ligado a un estadoinvoke: { src, onDone, onError }
Envolver async como actorfromPromise / fromObservable
Crear un actor hijospawnChild(...)
Mensajes entre actoressendTo / sendParent
👁️ UI y herramientas 5
Conectar a ReactuseMachine(machine)
Suscribirse a una parteuseSelector(actor, sel)
Ver transiciones en vivocreateBrowserInspector()
Diseñar y visualizar el statechartStately Studio
Transición pura para testeargetNextSnapshot(...)