0Pricing
Angular Academy · Lección

Actualización de señales con set y update

Cambie los valores de las señales de forma reactiva.

Actualización de señales con set y update 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.

Cambiar una señal

Una señal writable puede cambiarse de dos formas: set() para reemplazar el valor y update() para derivar un valor nuevo a partir del actual.

Usar set()

set(newValue) reemplaza por completo el valor de la señal por el valor que proporcione.

const c = signal(0);
c.set(1);
console.log(c()); // 1

Cuándo usar set()

Utilice set() cuando el nuevo valor no dependa del anterior, por ejemplo, al asignar un valor nuevo procedente de la entrada del usuario o de una respuesta de la API.

const name = signal('');
name.set('Alice');
console.log(name()); // Alice

Usar update()

update(fn) recibe una función que obtiene el valor actual y devuelve el nuevo valor. Es ideal cuando el siguiente valor depende del anterior.

const c = signal(0);
c.update(v => v + 1);
console.log(c()); // 1

Incrementar con update()

El contador clásico utiliza update() para incrementarse a partir del recuento existente.

const count = signal(10);
count.update(v => v + 1); // 11
count.update(v => v - 1); // 10

Actualizar objetos de forma inmutable

Como la detección de cambios compara referencias, reemplace los objetos en lugar de modificarlos. Extienda el valor anterior para crear un objeto nuevo.

const point = signal({ x: 0, y: 0 });
point.update(p => ({ ...p, x: p.x + 1 }));
console.log(point()); // { x: 1, y: 0 }

Actualizar matrices de forma inmutable

En el caso de las matrices, devuelva una matriz nueva. Evite usar push/splice en la matriz existente; utilice la sintaxis spread o métodos de matriz que devuelvan matrices nuevas.

const items = signal<string[]>(['a']);
items.update(arr => [...arr, 'b']);
console.log(items()); // ['a', 'b']

Resumen de set() frente a update()

set: ya tiene el valor final. update: calcula el valor final a partir del actual. Ambos notifican a los consumidores si el valor cambia realmente.

Igualdad de referencias y cambios

De forma predeterminada, las señales utilizan la igualdad de referencias (o de valores, en el caso de los tipos primitivos) para decidir si algo ha cambiado. Asignar a una señal exactamente el mismo valor primitivo no notifica a los dependientes.

const c = signal(5);
c.set(5); // no change, dependents not notified

No se recomienda modificar directamente

Las API antiguas tenían un método mutate(), pero el enfoque moderno recomendado consiste en realizar actualizaciones inmutables con set() y update() que devuelvan referencias nuevas.

Actualizar señales en métodos

En los componentes, encapsule las actualizaciones de señales en métodos que la plantilla pueda llamar desde los controladores de eventos.

export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
  reset() { this.count.set(0); }
}

Comprobación rápida: set frente a update

Seleccione la herramienta adecuada para cada tarea.

Resumen: actualización de Signals

Ha aprendido a usar set() para reemplazar un valor y update(fn) para obtener un valor nuevo a partir del actual. También ha visto cómo actualizar objetos y arrays de forma inmutable para que la igualdad de referencias detecte el cambio. A continuación: uso directo de signals en plantillas.

Preguntas frecuentes

¿La lección «Actualización de señales con set y update» es gratis?

Sí — el texto completo de «Actualización de señales con set y update» 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 «Actualización de señales con set y update»?

Cambie los valores de las señales de forma reactiva. 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 «Actualización de señales con set y update»?

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

  1. Qué son las señales
  2. Creación y lectura de señales
  3. Actualización de señales con set y update
  4. Señales en plantillas
← Volver a Angular Academy