Arquitectura de estado: escalar más allá de los componentes · Rubén Vega Balbás, PhD · UDIT, University of Design, Innovation and Technology

WEB ATELIER (UDIT) · Aprender haciendo, con teoría, práctica y reflexión compartida

Arquitectura de estado: escalar más allá de los componentes

Borrador
By Rubén Vega Balbás, PhD 2025-01-15

URL: https://ruvebal.github.io/web-atelier-udit/lessons/es/react/react-state-architecture/

📋 Tabla de contenidos

🏛️ Arquitectura de estado: escalar más allá de los componentes

“Cuando el estado crece más allá de un componente, la arquitectura se convierte en tu aliada o en tu enemiga.”

🎯 Objetivo del sprint

Al finalizar este sprint: implementar una arquitectura de estado escalable que permita que features de tu app se comuniquen (carrito, auth, tema, preferencias…).

📍 Posición en el viaje

Sprint Enfoque Tu app crece
5. Fundamentos Componentes, JSX, Props Esqueleto de librería de componentes
6. Hooks Estado y efectos Componentes interactivos
→ 7. Arquitectura Estado global Features conectadas
8. Routing Navegación Estructura multipágina

🧭 Objetivos de aprendizaje

Al final de esta lección:

  • Decidirás cuándo el estado local no es suficiente
  • Implementarás useReducer para lógica de estado compleja
  • Compartirás estado mediante React Context
  • Integrarás Zustand para estado global ligero
  • Entenderás patrones de Redux (a nivel conceptual)
  • Estructurarás el estado por dominios

🏗️ Qué construiremos este sprint

Dominios de estado para tu app

// Organiza el estado por dominio:

src/
├── store/
│   ├── auth/           // Sesión de usuario, tokens
│   │   ├── AuthContext.jsx
│   │   └── useAuth.js
│   ├── cart/           // Carrito (si aplica)
│   │   └── useCartStore.js  // Zustand
│   ├── theme/          // Modo oscuro/claro
│   │   └── ThemeContext.jsx
│   └── ui/             // Modales, sidebars, toasts
│       └── useUIStore.js

🔧 Puntos de integración

Fuente de datos Capa de estado
Laravel API Tokens de auth en Context, datos en React Query (próximo sprint)
Hygraph CMS Contenido cacheado con React Query, UI state local
Local Storage Store persistido (tema, preferencias) con Zustand

Árbol de decisión de estado

¿Este estado...
│
├─→ ¿Lo usan 1-2 componentes cercanos?
│   └─→ useState + prop drilling ✓
│
├─→ ¿Es complejo y tiene muchas acciones?
│   └─→ useReducer ✓
│
├─→ ¿Lo necesitan componentes lejanos?
│   ├─→ ¿Pequeño/simple? → Context ✓
│   └─→ ¿Grande/complejo? → Zustand/Redux ✓
│
└─→ ¿Viene del servidor?
    └─→ React Query (próximo sprint) ✓

🎓 Metodología: práctica atelier

Ritmo del sprint

┌─────────────────────────────────────────────────────────┐
│ DÍA 1: Context y reducers                                │
│   • Construir AuthContext juntas (login/logout/user)     │
│   • Refactor: de useState complejo a useReducer          │
│   • Debate: ¿cuándo lo local se vuelve global?           │
├─────────────────────────────────────────────────────────┤
│ DÍA 2: Taller de Zustand                                 │
│   • Live coding: store de carrito con Zustand            │
│   • Equipos: 1-2 stores según dominios de su app         │
│   • Práctica IA: generar acciones/selectors              │
├─────────────────────────────────────────────────────────┤
│ DÍA 3: Revisión de arquitectura                          │
│   • Cada equipo presenta su arquitectura de estado       │
│   • Crítica: ¿over-engineered? ¿insuficiente?            │
│   • Refactor según feedback                              │
└─────────────────────────────────────────────────────────┘

Protocolo de desarrollo asistido por IA

Tarea Rol de la IA Tu rol
Diseñar la forma del estado Proponer estructura Evaluar para tu dominio
Generar acciones del reducer Scaffold de switch Garantizar inmutabilidad
Depurar re-renders en Context Explicar el problema Aplicar memoización
Comparar librerías Listar pros/contras Decidir para tu proyecto

📝 Entregables del sprint

  • AuthContext con estado login/logout/user
  • 1 store Zustand para una feature (carrito, preferencias, etc.)
  • useReducer para al menos un componente complejo
  • Diagrama de arquitectura de estado en README
  • Persistencia en localStorage para al menos un store
  • Reflexión: ¿qué patrones emergieron? ¿qué cambiarías?
Anterior Actual Siguiente
Dominio de hooks Arquitectura de estado Routing

📚 Vista previa: conceptos clave

Contenido completo pendiente. Temas incluidos:

  1. Principio de localidad del estado
  2. useReducer: Redux en miniatura
  3. Context API en profundidad
  4. Zustand: store moderno y ligero
  5. Selectores y estado derivado
  6. Estrategias de persistencia
  7. Estado y tipado (opcional)
  8. Antipatrones comunes

“La mejor arquitectura es la más simple que resuelve tu problema. Ni más simple, ni más compleja.”