Estado del Frontend
Proceso
- Clasifica cada valor: datos duraderos del servidor, estado de URL/navegación compartible, borrador de formulario o estado temporal de presentación. Elige un único propietario autoritario.
- Reutiliza las herramientas instaladas de estado/obtención de datos. Mantén el estado local cerca de sus consumidores; introduce estado compartido solo cuando haya una necesidad concreta de coordinación.
- Almacena en caché las claves del servidor según todas las dimensiones de consulta y autorización. Límpialas o aísla las cachés al cerrar sesión, cambiar de tenant o modificar la identidad.
- Modela explícitamente los estados de carga, vacío, error y éxito. Para solicitudes concurrentes, la cancelación puede reducir trabajo, pero también protege la aceptación del resultado para que una respuesta antigua no reemplace una intención más reciente.
- Para mutaciones optimistas, concilia con el servidor y define el comportamiento en caso de fallo. Un rollback no debe borrar una mutación exitosa más reciente; rastrea las operaciones o usa el patrón de concurrencia compatible con la librería.
- Verifica la navegación hacia adelante/atrás, reintentos, cambios rápidos de entrada, mutaciones fallidas y cambio de cuenta.
Ejemplo
Buscar A y luego B devuelve primero B y luego A. Los resultados mostrados siguen siendo B, y la URL refleja la búsqueda actual en lugar del orden de finalización de la respuesta.
Condiciones de parada
No reemplaces la librería de estado para resolver una condición de carrera local. Duplicar el mismo valor del servidor en stores globales independientes crea una obligación de sincronización.
Evidencia
- Mapa de propiedad del estado y claves de caché.
- Verificaciones de condiciones de carrera, rollback y transición de sesión.
- Comportamiento visible de carga y recuperación.
Referencia
Flujo de trabajo escrito de forma independiente tras revisar react-state-management.