Estados jerárquicos: un estado que contiene una máquina

En una FSM plana un estado es un punto sin interior. La jerarquía de Harel rompe esa atomicidad: un estado compuesto contiene otros estados y se comporta como una máquina anidada dentro de otra. Cuando el sistema entra en el compuesto, arranca automáticamente por su subestado inicial; mientras permanece dentro, está a la vez en el compuesto y en uno de sus hijos. Esta doble pertenencia es la clave de todo. Un evento no se resuelve en un único lugar, sino que se ofrece primero al subestado más interno y, si este no sabe qué hacer con él, sube por la jerarquía buscando un ancestro que lo atienda. Ese burbujeo es la mecánica que permite declarar una vez lo que vale para muchos, y con ella la explosión aditiva de aristas simplemente desaparece.

Un estado con interior

Un estado compuesto se declara igual que la máquina raíz: con un initial y un mapa de states. La diferencia es que vive dentro de otro estado. Modelemos un reproductor cuyo estado encendido contiene una submáquina de reproducción.

import { createMachine } from 'xstate'

const reproductor = createMachine({
  id: 'reproductor',
  initial: 'encendido',
  states: {
    encendido: {
      initial: 'pausado', // al entrar en encendido, se arranca aqui
      states: {
        pausado: { on: { PLAY: 'reproduciendo' } },
        reproduciendo: { on: { PAUSE: 'pausado' } },
      },
      on: { APAGAR: 'apagado' }, // declarado UNA vez: cubre todos los subestados
    },
    apagado: { on: { ENCENDER: 'encendido' } },
  },
})

Mientras el reproductor está encendido, no está solo en encendido: está en encendido y, dentro, en pausado o en reproduciendo. La configuración activa es el camino completo desde la raíz hasta la hoja, y en XState se refleja como un valor anidado. Estar reproduciendo se expresa como el objeto que empareja el compuesto con su hijo activo, no como una cadena suelta.

const actor = createActor(reproductor).start()
actor.send({ type: 'PLAY' })
actor.getSnapshot().value // { encendido: 'reproduciendo' }

stateDiagram-v2
[*] --> Encendido
state Encendido {
  [*] --> Pausado
  Pausado --> Reproduciendo: play
  Reproduciendo --> Pausado: pause
}
Encendido --> Apagado: apagar
Apagado --> Encendido: encender

El burbujeo: el evento sube por la jerarquía

Aquí está el corazón de la lección. Cuando llega un evento, el intérprete no lo entrega a un lugar fijo, sino que lo ofrece de dentro hacia afuera. El algoritmo es exactamente este:

1. Se parte del estado hoja activo, el más interno.
2. Si la hoja declara una transición para ese evento, la toma y termina.
3. Si no, el evento sube al estado padre y se repite la pregunta.
4. Se asciende así hasta la raíz; el primer ancestro que lo maneje gana.
5. Si nadie lo maneja, el evento se descarta sin efecto.

Con el reproductor encendido y reproduciendo, un APAGAR no lo maneja reproduciendo, así que sube a encendido, que sí lo declara: la máquina apaga. Un PAUSE, en cambio, lo resuelve la propia hoja reproduciendo sin subir. Esta resolución de dentro hacia afuera es la razón exacta por la que una única transición APAGAR en el superestado vale para todos sus hijos: los hijos no la manejan, así que el evento burbujea hasta donde está declarada.

Un subestado que quiere interceptar un evento del ancestro solo tiene que declararlo. El más interno gana siempre.

reproduciendo: {
  on: {
    PAUSE: 'pausado',
    APAGAR: 'guardando', // redefine APAGAR SOLO para este subestado
  },
},

La jerarquía, entonces, no es un adorno del diagrama: es un mecanismo de factorización con reglas precisas de herencia y resolución. Conviene fijar las cuatro que hacen todo el trabajo.

Entrar, salir y apuntar entre niveles

Entrar en un compuesto sin más detalle activa su subestado inicial: es la regla por defecto. Pero una transición puede apuntar a un subestado concreto saltándose el inicial, usando un objetivo cualificado que nombra el camino.

apagado: {
  on: { ENCENDER: 'encendido.reproduciendo' }, // entra directo al subestado
},

Salir de un compuesto tiene una consecuencia importante: al abandonar el superestado se abandonan también todos sus descendientes activos, de dentro hacia afuera. Esto importará mucho cuando veamos las acciones de salida, porque cada nivel que se abandona ejecuta su propia limpieza. Para apuntar desde un subestado a un hermano de un ancestro, XState resuelve el objetivo trepando por el árbol hasta encontrar un estado con ese nombre; también existen objetivos relativos con notación de punto para bajar dentro del mismo nivel. La regla mental es simple: una transición nunca cruza a otra máquina, solo se mueve dentro del árbol en el que vive.

Hay un matiz que enlaza con la siguiente lección. Apuntar a un compuesto activa su subestado inicial, pero eso significa que reentrar en él siempre lo reinicia: se pierde en qué subestado estabas la última vez. A menudo es justo lo que quieres, pero no siempre; recordar la posición previa al volver es precisamente lo que resolverá la historia. Por ahora basta con retener que, sin más mecanismo, entrar en un compuesto es empezar de cero por su inicial.