Marc Semper Lloret
← El DOM: la web que responde

Sesión 10 · Semana 4

El estado, una sola fuente de verdad

Hoy · Hoja de ruta

  1. 1. Aprende: Qué es el estado de una interfaz y por qué debe estar en un solo sitio.
  2. 2. Haz: Reescribe tu página con el ciclo evento → estado → render.
  3. 3. Comprueba: Ninguna decisión se toma leyendo la página.

Antes de empezar · 5 minutos, sin apuntes

  1. Ahora mismo, ¿dónde está guardado qué filtro está activo?
  2. Si hubiera dos sitios donde consultarlo, ¿qué podría pasar?
  3. ¿Qué información necesitarías para volver a pintar la página exactamente igual?

El problema que resuelve

Sin estado, la información se reparte: el término de búsqueda está en el campo, la categoría en la clase de un botón, el orden en una variable y los resultados en el DOM. Cuatro sitios que hay que mantener de acuerdo a mano, y que tarde o temprano dejan de estarlo.

Estado

Un objeto que contiene todo lo que hace falta para saber cómo debe verse la interfaz en este momento. Si lo tienes, puedes pintar la página entera desde cero.

// js/estado.js
export const estado = {
  productos: [],
  busqueda: "",
  categoria: "todas",
  orden: "precio-asc",
  soloDisponibles: false,
  cargando: false,
  error: null
};

El ciclo

// js/main.js
function actualizar() {
  const visibles = aplicarFiltros(estado);
  pintarCatalogo(visibles, elementos.catalogo);
  pintarResumen(visibles.length, estado.productos.length, elementos.resumen);
  sincronizarControles(estado, elementos);
}

elementos.buscador.addEventListener("input", (evento) => {
  estado.busqueda = evento.target.value;
  actualizar();
});

elementos.orden.addEventListener("change", (evento) => {
  estado.orden = evento.target.value;
  actualizar();
});

Cada manejador hace exactamente dos cosas: cambiar el estado y pedir que se actualice. Ninguno toca el DOM directamente.

Una dirección única
  1. Evento
  2. Cambia el estado
  3. actualizar()
  4. La página refleja el estado

No preguntes a la página; pregunta al estado

La tentación es comprobar si un botón tiene una clase para saber si el filtro está activo. Eso convierte al DOM en un almacén de datos, y a partir de ahí hay dos verdades que pueden discrepar.

El DOM es salida, no memoria. Se escribe en él; no se lee de él.

Aplicar los filtros en un sitio

// js/catalogo.js — funciones de la UD3, combinadas
export function aplicarFiltros(estado) {
  let resultado = estado.productos;

  if (estado.busqueda.trim() !== "") resultado = buscar(resultado, estado.busqueda);
  if (estado.categoria !== "todas") resultado = porCategoria(resultado, estado.categoria);
  if (estado.soloDisponibles) resultado = disponibles(resultado);

  return ordenar(resultado, estado.orden);
}

Una función pura: recibe el estado y devuelve la lista que toca. Se puede probar sin abrir el navegador, que es exactamente lo que la hace fácil de arreglar cuando algo falla.

Tarea 10 · Reescribir con estado

  1. Crea js/estado.js con el objeto y sus valores iniciales.
  2. Escribe aplicarFiltros(estado) combinando tus funciones de la UD3.
  3. Escribe actualizar() como único punto que pinta.
  4. Convierte todos tus manejadores al patrón «cambia estado, actualiza».
  5. Elimina cualquier lectura del DOM que sirviera para decidir algo.
  6. Comprueba que cambiando el estado a mano desde la consola y llamando a actualizar() la página responde.
Objetivo mínimoEstado único, una función de render y manejadores de dos líneas.
Si lo tienesQue sincronizarControles deje los campos coherentes con el estado.
RetoEscribe el estado inicial en la URL y recupéralo al cargar.

Checkpoint · fin de la sesión 10

  • Existe un único objeto de estado.
  • Los manejadores cambian estado y llaman a actualizar.
  • Ninguna decisión se toma leyendo el DOM.
  • Puedes reproducir cualquier vista fijando el estado a mano.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué es el estado de una interfaz?
  2. ¿Por qué el DOM no debe ser el almacén de datos?
  3. ¿Qué dos cosas hace un manejador de eventos?
Ver respuestas

1 · Todo lo necesario para saber cómo debe verse la página ahora mismo.

2 · Porque tendrías dos fuentes de verdad que pueden contradecirse.

3 · Cambiar el estado y pedir que se vuelva a pintar.