Modela flujos complejos con confianza: aquí verás cómo una máquina de estado organiza un formulario tipo Wizard en React + TypeScript, controlando estados, transiciones y validaciones para que el usuario avance solo cuando corresponde.
¿Qué es una máquina de estado y cuándo usarla en desarrollo web?
Una máquina de estado representa un sistema con estados definidos y reglas de cambio entre ellos. En un Wizard con múltiples steps, inicia en un estado visible (p. ej., “nombre”) y oculta los demás hasta cumplir condiciones.
- Define estados claros: step uno, step dos, confirmación.
- Controla transiciones con acciones del usuario.
- Añade blockers cuando falta información.
- Mejora mantenimiento y legibilidad del código.
¿Cómo funciona el Wizard con pasos, validaciones y transiciones?
El flujo propuesto guía al usuario por tres steps: ingresar nombre, ingresar edad y confirmación. Solo se avanza si el estado actual está completo. La transición se modela como una acción (p. ej., advance) que retorna un booleano.
- Estado inicial visible: formulario de nombre.
- Condición de avance: campos completos del estado actual.
- Transición controlada: si la validación falla, no se pasa al siguiente step.
- Confirmación final: muestra el nombre y la edad ingresados.
¿Cómo configurar la StateMachine en React y TypeScript?
Se propone una interfaz de configuración para definir el paso inicial, los steps con su regla de avance y las views que se renderizan en cada estado. También se tipan los nombres de pasos y el estado del Wizard.
¿Qué estructura tiene StateMachineConfig?
import React from 'react';
interface StateMachineConfig<StepNames extends string, StateType> {
initialStep: StepNames;
steps: {
[K in StepNames]: {
// Bloquea o permite avanzar según el estado actual.
advance: (state: StateType) => boolean;
};
};
views: {
[K in StepNames]: React.ComponentType<{
state: StateType;
setState: React.Dispatch<React.SetStateAction<StateType>>;
}>;
};
}
¿Qué nombres de steps y estado necesita el Wizard?
// Nombres de pasos del flujo.
type StepNames = 'step uno' | 'step dos' | 'Confirmation';
// Estado del Wizard: datos recolectados en cada paso.
type WizardState = {
nombre: string;
edad: number;
};
- initialStep: uno de los StepNames.
- steps: cada key es un StepName con su función advance.
- views: mapea cada StepName a un componente de React que recibe state y setState.
¿Qué setup de proyecto React + Vite se realizó?
- Crear proyecto con Vite y elegir React + TypeScript.
- Instalar dependencias con npm install.
- Limpiar el archivo App y preparar la configuración de la máquina de estado.
- Verificar en el navegador que la app arranca correctamente.
¿Tienes dudas sobre cómo tipar las transiciones o estructurar las views por paso? Cuéntame tu caso y te ayudo a aplicarlo en tu flujo.
