Un formulario largo abruma; partirlo en PASOS lo vuelve amable: "Datos personales → Dirección →
Confirmar". Pero un wizard trae retos propios: el estado se ACUMULA entre pasos, hay que poder ir y
VOLVER sin perder lo escrito, y validar cada paso antes de avanzar. La buena noticia: no necesitas una
librería nueva —lo armas con las herramientas de estado que ya dominas (useReducer y el pensamiento
de máquinas de estado del módulo 6)—. Hoy construyes un wizard en vivo.
Un trámite por ventanillas
Un wizard en vivo
Este playground es un asistente de tres pasos. El estado del formulario vive ARRIBA (acumulado), y un
useReducer maneja en qué paso estás —una mini máquina de estados—:
Avanza y retrocede: los datos que escribiste PERMANECEN porque viven en datos (arriba), no dentro de
cada paso. El paso lo maneja un pasoReducer —una máquina simple que solo permite ir de 0 a 2 y de
vuelta, nunca fuera de rango—. Y pasoValido bloquea "Siguiente" hasta que el paso actual esté
completo. Tres piezas: estado acumulado (arriba), navegación entre pasos (reducer), y validación por
paso. Sin librerías nuevas —todo con lo del módulo 6—.
La arquitectura de un wizard
En un formulario multi-paso, ¿dónde debe vivir el estado del formulario y por qué?
Mini-reto
Amplía el wizard: 1) agrega un cuarto paso "Email" (entre Ubicación y Confirmar) con su validación
(incluye "@"); 2) muestra los cuatro datos en el paso de confirmación; 3) al reducer del paso, agrégale
una acción "reiniciar" que vuelva al paso 0, y un botón "Empezar de nuevo" en la confirmación (recuerda
limpiar también los datos). Verifica que ir y volver entre pasos nunca pierde lo escrito.
Qué sigue
Cierras el módulo con un reto que junta todo: un formulario de nuevo gasto para "Mi Bolsillo",
validado, accesible y con buen manejo de errores —el formulario completo que una app real necesita—.
Aplicarás controlados, validación, y accesibilidad en una pieza pulida de principio a fin.