Web y frontend · Avanzado

Gestión de estado en una app web

En una línea: La mayor parte de lo que se llama estado son datos de servidor guardados en el sitio equivocado; sepáralos y la mitad de la complejidad desaparece.

Cuatro tipos de estado

Datos de servidor. Listas, elementos, perfil. Son copias de una fuente de verdad remota y necesitan trato de caché: carga, actualización, expiración.

Estado de interfaz. Un panel abierto, una pestaña elegida, texto tecleado. Vive en el componente, muere con él.

Estado de dirección. Filtro, paginación, búsqueda. Su sitio es la URL, para poder compartirlo y volver atrás.

Estado global de verdad. Usuario conectado, tema, idioma. Muy pocas cosas.

El error común

Poner todo en un único almacén global. El resultado: cada pantalla depende de cada pantalla, los datos envejecen sin que nadie lo note, y fallos que aparecen solo al llegar a una pantalla en cierto orden.

Al separar, la mayor parte del código global se evapora. Lo que queda es pequeño y fácil de entender.

Qué necesita trato explícito

Estados de carga y error para cada obtención, evitar peticiones viejas que vuelven tras una más reciente, y actualizaciones optimistas que sepan revertir cuando el servidor rechazó.

En profundidad

Define una política de frescura por tipo de dato: cuánto se considera válida una copia y cuándo actualizar en segundo plano. Sin una política explícita, cada pantalla inventa la suya, y entonces “por qué no se actualiza esto” se vuelve un fallo eterno.