Angular Academy · Lección

Actualizar el estado de forma inmutable

Aplicar actualizaciones inmutables al estado de los signals

Actualizar el estado de forma inmutable es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Por qué la inmutabilidad

Los signals detectan los cambios por referencia. Si modifica un array o un objeto directamente, la referencia permanece igual y los signals computed() dependientes podrían no volver a calcularse. Produzca siempre una referencia nueva.

La trampa de la mutación

Insertar elementos en un array existente lo modifica sin cambiar la referencia. Evítelo.

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

Spread para arrays

Cree un array nuevo con el operador spread para que cambie la referencia y los consumidores vuelvan a ejecutarse.

// GOOD: new array reference
this._items.update(list => [...list, item]);

Eliminar elementos

Use filter(), que devuelve un array completamente nuevo y deja intacto el original.

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

Actualizar un elemento

Use map() para devolver un array nuevo y aplique spread al objeto coincidente para crear una copia nueva, de modo que también cambie la referencia interna.

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

Spread para objetos

Para el estado de un objeto, aplique spread al objeto anterior y sobrescriba los campos modificados. Los objetos anidados también necesitan su propio spread.

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

set con un valor nuevo

Al reemplazar completamente el estado, usar set() con un objeto nuevo es inmutable por naturaleza, ya que proporciona una referencia nueva.

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

Por qué computed depende de ello

Como los modelos de lectura calculados dependen de la referencia del signal, las actualizaciones inmutables garantizan que se vuelvan a calcular. Una mutación que conserve la misma referencia del array puede dejar silenciosamente obsoletos los totales y los filtros.

Patrones auxiliares

Extraiga pequeños helpers puros para las transformaciones habituales, de modo que los métodos del store sean legibles y coherentes.

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

Precaución con el anidamiento profundo

Un estado profundamente anidado implica muchos usos de spread. Si las actualizaciones se vuelven complicadas, aplane la estructura del estado o divídala en varios signals para que cada actualización afecte a una parte pequeña.

La inmutabilidad facilita la depuración

Como cada actualización produce una referencia nueva, puede comparar instantáneas a lo largo del tiempo, registrar el estado anterior y el siguiente, y razonar sobre los cambios sin preocuparse por modificaciones ocultas en el sitio.

Comprobación rápida

Compruebe cuánto domina las actualizaciones inmutables de señales.

Resumen

Aprendió patrones de actualización inmutables: spread para arrays y objetos, map/filter para editar y eliminar, referencias nuevas mediante set y por qué la igualdad de referencias hace que la inmutabilidad sea esencial para una reactividad correcta.

Preguntas frecuentes

¿La lección «Actualizar el estado de forma inmutable» es gratis?

Sí — el texto completo de «Actualizar el estado de forma inmutable» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Actualizar el estado de forma inmutable»?

Aplicar actualizaciones inmutables al estado de los signals Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Actualizar el estado de forma inmutable»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy