Estados paralelos: dimensiones ortogonales a la vez

La jerarquía resolvió la explosión aditiva, pero deja intacta la otra explosión, la multiplicativa: la que surge cuando un sistema tiene dimensiones genuinamente independientes. Un texto puede estar en negrita o no, en cursiva o no, subrayado o no, y esas tres decisiones no se estorban entre sí. Modelarlas con estados exclusivos obliga a inventar un estado por cada combinación, y las combinaciones crecen como potencias de dos. La ortogonalidad de Harel ataca esto de raíz: en lugar de un estado que sea la mezcla de todas las dimensiones, se declaran varias regiones que viven a la vez, cada una gobernando una sola dimensión. El sistema deja de estar en un estado y pasa a estar en varios simultáneamente, uno por región, y el producto cartesiano nunca llega a materializarse.

Varias regiones activas a la vez

Un estado paralelo se marca con type: 'parallel' y no tiene initial, porque no elige un hijo: los activa todos. Cada hijo es una región, y cada región es a su vez un estado compuesto con su propia submáquina. Modelemos el formato de un fragmento de texto con tres dimensiones independientes.

import { createMachine } from 'xstate'

const formato = createMachine({
  id: 'formato',
  type: 'parallel', // todas las regiones activas a la vez, sin initial
  states: {
    negrita: {
      initial: 'off',
      states: {
        off: { on: { TOGGLE_NEGRITA: 'on' } },
        on: { on: { TOGGLE_NEGRITA: 'off' } },
      },
    },
    cursiva: {
      initial: 'off',
      states: {
        off: { on: { TOGGLE_CURSIVA: 'on' } },
        on: { on: { TOGGLE_CURSIVA: 'off' } },
      },
    },
    subrayado: {
      initial: 'off',
      states: {
        off: { on: { TOGGLE_SUBRAYADO: 'on' } },
        on: { on: { TOGGLE_SUBRAYADO: 'off' } },
      },
    },
  },
})

La configuración ya no es un camino único a una hoja, sino un abanico: una hoja activa por región. En XState se refleja como un objeto con una clave por región, y todas conviven.

const actor = createActor(formato).start()
actor.send({ type: 'TOGGLE_NEGRITA' })
actor.send({ type: 'TOGGLE_SUBRAYADO' })
actor.getSnapshot().value // { negrita: 'on', cursiva: 'off', subrayado: 'on' }

stateDiagram-v2
state Formato {
  state Negrita {
    [*] --> NegOff
    NegOff --> NegOn: toggle
    NegOn --> NegOff: toggle
  }
  --
  state Cursiva {
    [*] --> CurOff
    CurOff --> CurOn: toggle
    CurOn --> CurOff: toggle
  }
  --
  state Subrayado {
    [*] --> SubOff
    SubOff --> SubOn: toggle
    SubOn --> SubOff: toggle
  }
}

Las dos rayas horizontales que separan las regiones en el diagrama son la notación de Harel para la concurrencia: dicen que todo lo que hay a un lado y al otro está activo a la vez. No hay flechas entre regiones porque son independientes; cada una evoluciona por su cuenta.

De exponencial a lineal

El ahorro no es estético, es de complejidad. Cuenta los estados. Con tres dimensiones binarias, una FSM plana necesita dos elevado a tres, ocho estados combinados, y cada uno con tres aristas de conmutación: veinticuatro transiciones que enumerar y mantener. El statechart paralelo tiene tres regiones de dos estados: seis nodos y seis transiciones. La diferencia se dispara al crecer: una cuarta dimensión lleva la FSM plana a dieciséis estados y el statechart a ocho nodos; una quinta, a treinta y dos frente a diez.

Difusión: un evento para todas las regiones

Las regiones son independientes, pero no incomunicadas. Cuando llega un evento, el intérprete lo ofrece a todas las regiones activas a la vez, y cada una lo resuelve por su cuenta con el burbujeo de la lección anterior. La consecuencia es potente: un mismo evento puede provocar transiciones simultáneas en varias regiones. Un QUITAR_FORMATO declarado en las tres regiones apaga las tres de un golpe, en un solo turno.

// el mismo evento manejado en cada region: una difusion, tres transiciones
negrita: {
  initial: 'off',
  states: {
    off: { on: { TOGGLE_NEGRITA: 'on', QUITAR_FORMATO: 'off' } },
    on: { on: { TOGGLE_NEGRITA: 'off', QUITAR_FORMATO: 'off' } },
  },
},
// ... cursiva y subrayado declaran igualmente QUITAR_FORMATO: 'off'

Esta difusión es el canal de coordinación entre regiones que Harel incluyó en el formalismo. Una región puede además emitir un evento interno con raise, y ese evento se difunde también a todas las regiones en el mismo ciclo, permitiendo que un cambio en una dimensión desencadene ajustes en otra sin cablear transiciones directas entre ellas. Un estado paralelo se considera completado solo cuando todas sus regiones han alcanzado un estado final, momento en el que dispara su onDone: la conjunción de todas las dimensiones terminadas.