April 8, 2025 5 min to read

Programación Reactiva con Signals

Programación Reactiva con Signals

Buenas como andan? El post de hoy va dedicado a la programación reactiva en Angular aplicando Signals, donde vamos a estar repasando conceptos, las técnicas necesarias para implementar señales, integración y compatibilidad con RxJS, ventajas y ejercicios; como siempre la docu oficial por acá

¿Qué son los Signals en Angular?

Con Angular 16, se introduce una nueva forma de manejar la reactividad: los Signals. Estos nos permiten gestionar el estado de forma más eficiente y sencilla, sin necesidad de depender de Observables y suscripciones.

Los Signals fueron introducidos en Angular 16 como una alternativa más simple y eficiente para manejar la reactividad. En versiones anteriores de Angular, el manejo de la reactividad estaba centrado en los Observables y RxJS, lo que en algunas situaciones, podría resultar complejo y generar código más pesado. Los Signals buscan simplificar esto, ofreciendo otra manera, más directa, de interactuar con los datos reactivos (ya sean valores primitivos o estructuras de datos), evitando también, las complejidades que podrían implicar las suscripciones y el ciclo de vida de los Observables.

¿Cómo funcionan los Signals?

Los Signals permiten almacenar y gestionar valores reactivos. A diferencia de los Observables, no necesitamos suscripciones manuales. Los Signals gestionan la reactividad automáticamente. Cuando un valor cambia, Angular actualiza la vista de forma automática.

Para crear un Signal, simplemente se usa la función signal() pasando un valor inicial.

Ejemplo:

import { signal } from "@angular/core";

export class CounterComponent {
  // Crear un Signal con valor inicial
  counter = signal(0);

  // Incrementamos el valor del contador
  increment() {
    this.counter.set(this.counter() + 1);
  }
}

En este ejemplo:

• counter es un Signal que tiene un valor inicial de 0.
• Utilizamos counter() para obtener el valor del Signal.
• Para actualizar el valor de counter, usamos counter.set().

Un Signal Computado depende de uno o más Signals. Cuando los Signals de los que depende cambian, el Signal Computado se recalcula automáticamente.

Ejemplo:

import { signal, computed } from "@angular/core";

export class CounterComponent {
  counter = signal(0);

  // Signal Computado que depende de counter
  message = computed(() => {
    return `The counter value is: ${this.counter()}`;
  });

  increment() {
    this.counter.set(this.counter() + 1);
  }
}

En este ejemplo:

• message es un Signal Computado que depende del Signal counter.
• Cada vez que counter cambia, message se recalcula automáticamente.
• No podemos actualizar message directamente, ya que es un Signal Computado (read-only) y su valor se deriva de counter (se recalcula en función de los cambios en el valor de counter).

Ventajas de los Signals

1. Simplicidad: Los Signals son más simples de implementar que los Observables. No es necesario preocuparnos por suscripciones, cancelaciones o combinaciones complejas de streams.
2. Rendimiento: Al ser más directos, los Signals son más rápidos y livianos en comparación con los Observables cuando la reactividad es simple.
3. Reducción de código: Los Signals requieren menos código, lo que hace que nuestras aplicaciones sean más legibles, escalables y mantenibles.
4. Reactividad automática: Los cambios en un Signal automáticamente actualizan la vista, lo que simplifica el manejo de la UI.

¿Cuándo usar Signals?

Los Signals son ideales cuando necesitamos manejar valores de estado simples de forma reactiva, sin la necesidad de suscripciones o manipulación avanzada de streams o flujos de datos, por ejemplo:

• contadores,
• valores booleanos,
• estructuras de datos simples que no requieran mapeos

No es recomendable usar Signals cuando estamos trabajando con aplicaciones complejas que requieren una reactividad avanzada, como combinaciones complejas de datos, manejo de múltiples streams, transformaciones y mapeos de datos.

Bonus: Integración de Signals y RxJS en Angular

En Angular, podemos combinar fácilmente la reactividad de Signals con la potencia de RxJS, un ejemplo es, usando dos métodos clave: toSignal y toObservable. Estos métodos facilitan la interoperabilidad entre ambos sistemas reactivos, permitiendo que podamos aprovechar lo mejor de ambos mundos.

Crear un Signal a partir de un Observable con toSignal:

El método toSignal nos permite convertir un Observable de RxJS en un Signal de Angular. Esto es útil por ejemplo, cuando queremos usar un Observable existente y manejar su valor de manera reactiva con Signals, sin perder la capacidad de obtener actualizaciones automáticas en la UI.

Crear un Observable a partir de un Signal con toObservable:

Por otro lado, toObservable nos permite convertir un Signal en un Observable. Esto es útil si necesitamos por ejemplo, que un Signal interactúe con otros flujos de datos en nuestra app que utilizan RxJS, permitiendo que los Signals se puedan integrar en un ecosistema basado en Observables.

Por acá paso la docu oficial con más detalles sobre la integración de Signals y RxJS (prometo que esta vez, no es como el meme).

Conclusión

Los Signals nos ofrecen una manera más directa y sencilla de gestionar la reactividad en Angular. Al eliminar la complejidad de los Observables, los Signals se convierten en una herramienta ideal para proyectos y funcionalidades con una lógica de estado simplificada y optimizada.

Para aplicaciones más complejas, donde necesitamos manejar múltiples flujos de datos y transformaciones avanzadas, RxJS y los Observables siguen siendo la mejor opción.

Happy coding!