Angular Signals y NgRx: Gestión de Estado Reactiva Avanzada (Mayo 2026)

En el dinámico mundo del desarrollo web, la gestión de estado en aplicaciones de gran escala siempre ha sido un desafío central. Con la constante evolución de frameworks como Angular, los desarrolladores buscan soluciones más eficientes, reactivas y fáciles de mantener. Mayo de 2026 nos encuentra en un punto donde Angular Signals, una característica revolucionaria introducida en Angular 16 y consolidada en las últimas versiones, está redefiniendo cómo abordamos la reactividad y la gestión de estado. Pero, ¿qué significa esto para los proyectos que ya utilizan potentes bibliotecas como NgRx? ¿Es un reemplazo, un complemento, o una forma de coexistencia inteligente? En este artículo, exploraremos a fondo Angular Signals, su capacidad para la gestión de estado local y global, y cómo podemos integrarlo de manera efectiva con NgRx para construir aplicaciones Angular robustas, escalables y altamente performantes en el panorama actual.

¿Qué Son Exactamente los Angular Signals?

Los Angular Signals representan un nuevo paradigma de reactividad dentro del ecosistema de Angular, ofreciendo un modelo de programación más simple y granular para el cambio de detección y la propagación de datos. A diferencia del enfoque basado en Zone.js y RxJS que ha dominado Angular durante años, los Signals adoptan un modelo de push explícito, donde los cambios se propagan solo cuando los datos enlazados realmente cambian, optimizando así el rendimiento y la legibilidad del código.

El corazón de los Signals reside en tres primitivas fundamentales:

• signal(): Crea una señal writable que contiene un valor y notifica a sus consumidores cuando ese valor cambia.
• computed(): Crea una señal de solo lectura cuyo valor se calcula a partir de otras señales. Se recalcula solo cuando sus dependencias cambian, lo que lo hace muy eficiente.
• effect(): Permite ejecutar un efecto secundario (como actualizar el DOM o registrar datos) cada vez que una de sus dependencias de señal cambia.

Este sistema proporciona una reactividad fina que puede reducir significativamente la necesidad de Zone.js en muchas operaciones, abriendo la puerta a aplicaciones verdaderamente «zone-less» y un rendimiento superior. Para el desarrollador, significa menos código boilerplate, un flujo de datos más predecible y una depuración más sencilla.

Uso Básico y Avanzado de Signals para la Reactividad

Entender los fundamentos de los Signals es el primer paso. Veamos cómo se utilizan estas primitivas básicas y cómo podemos extender su funcionalidad para escenarios más complejos.

Creación y Actualización de Señales

import { signal, computed, effect } from '@angular/core';  export class ContadorComponent {   // Señal writable para el contador   contador = signal(0);    // Señal computed para el doble del contador   dobleContador = computed(() => this.contador() * 2);    constructor() {     // Efecto que se ejecuta cada vez que el contador cambia     effect(() => {       console.log(`El contador actual es: ${this.contador()}`);       console.log(`El doble del contador es: ${this.dobleContador()}`);     });   }    incrementar() {     // Actualizar la señal usando .set() o .update()     this.contador.update(value => value + 1);   }    reset() {     this.contador.set(0);   } }

En este ejemplo, contador es una señal que podemos modificar, dobleContador se actualiza automáticamente cuando contador lo hace, y el effect reacciona a ambos. La función .update() es particularmente útil para modificar el valor de una señal basándose en su valor actual, garantizando la inmutabilidad y predictibilidad.

Signals para el Estado del Componente: Más Allá del Básico

La verdadera potencia de los Signals brilla en la gestión del estado local y reactivo de los componentes. Olvídate de los complejos Subject/BehaviorSubject para comunicar cambios internos; los Signals ofrecen una alternativa más limpia y performante.

import { Component, signal, ChangeDetectionStrategy, input } from '@angular/core';  interface Tarea {   id: number;   descripcion: string;   completada: boolean; }  @Component({   selector: 'app-lista-tareas',   standalone: true,   template: `     
Lista de Tareas
     
       @for (tarea of tareas(); track tarea.id) {         
           {{ tarea.descripcion }}                        {{ tarea.completada ? 'Deshacer' : 'Completar' }}                    
       }     
          Añadir     
Tareas pendientes: {{ tareasPendientes() }}
   `,   styles: [`     .completada {       text-decoration: line-through;       color: #888;     }   `],   changeDetection: ChangeDetectionStrategy.OnPush }) export class ListaTareasComponent {   // Estado inicial de las tareas como señal   tareas = signal([]);   nuevaTareaDescripcion = signal('');    // Señal computada para el número de tareas pendientes   tareasPendientes = computed(() =>     this.tareas().filter(tarea => !tarea.completada).length   );    constructor() {     // Inicializar tareas si se reciben de alguna fuente externa (ej. servicio)     // For simplicity, let's add some initial tasks.     this.tareas.set([       { id: 1, descripcion: 'Aprender Angular Signals', completada: false },       { id: 2, descripcion: 'Integrar con NgRx', completada: false }     ]);   }    addTarea() {     if (this.nuevaTareaDescripcion().trim()) {       const nuevaTarea: Tarea = {         id: Date.now(),         descripcion: this.nuevaTareaDescripcion(),         completada: false       };       // Actualizar la señal de tareas de forma inmutable       this.tareas.update(currentTasks => [...currentTasks, nuevaTarea]);       this.nuevaTareaDescripcion.set('');     }   }    toggleCompletada(id: number) {     this.tareas.update(currentTasks =>       currentTasks.map(tarea =>         tarea.id === id           ? { ...tarea, completada: !tarea.completada }           : tarea       )     );   } }

Aquí, tareas y nuevaTareaDescripcion son señales que gestionan el estado del componente. Cuando tareas se actualiza, tareasPendientes se recalcula automáticamente y la UI se re-renderiza eficientemente gracias a ChangeDetectionStrategy.OnPush y el sistema de reactividad granular de Signals. Este enfoque reduce la complejidad y mejora el rendimiento al evitar re-renders innecesarios.

Integración y Coexistencia con NgRx

La pregunta clave que surge para muchos equipos es: ¿qué pasa con NgRx? ¿Angular Signals lo reemplazará? La respuesta, en la mayoría de los casos, es no un reemplazo directo, sino una evolución hacia la coexistencia y la interoperabilidad estratégica. NgRx sigue siendo una solución robusta para la gestión de estado global, compleja y cross-componente, mientras que Signals brilla en la gestión de estado local y la reactividad interna.

La Utilidad toSignal(): Conectando Mundos

Una de las herramientas más importantes para la interoperabilidad es la utilidad toSignal(), que permite convertir un Observable (como los selectores de NgRx) en una señal. Esto es fundamental para que los componentes puedan consumir el estado global de NgRx utilizando el nuevo paradigma de Signals.

import { Component, inject } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; // O @angular/signals/rxjs-interop en versiones antiguas import { Store } from '@ngrx/store'; import { selectContador, selectUltimaAccion } from './estado/contador.selectors'; import { incrementar, decrementar } from './estado/contador.actions';  @Component({   selector: 'app-contador-ngrx-signals',   standalone: true,   template: `     
Contador NgRx con Signals
     
Valor: {{ contadorValue() }}
     
Última Acción: {{ ultimaAccion() || 'Ninguna' }}
     Incrementar     Decrementar   ` }) export class ContadorNgRxSignalsComponent {   private store = inject(Store);    // Convertir selectores NgRx a señales   contadorValue = toSignal(this.store.select(selectContador), { initialValue: 0 });   ultimaAccion = toSignal(this.store.select(selectUltimaAccion));    onIncrementar() {     this.store.dispatch(incrementar());   }    onDecrementar() {     this.store.dispatch(decrementar());   } }

En este fragmento, contadorValue y ultimaAccion son señales computadas que derivan su valor del store de NgRx. Cualquier actualización en el store disparará automáticamente la actualización de estas señales, y con ello, la re-renderización eficiente del componente. Esto permite a los componentes «signals-first» consumir el estado global de NgRx sin tener que suscribirse manualmente a Observables o gestionar complejas desuscripciones.

Disparando Acciones NgRx con effect()

Mientras toSignal() es excelente para leer el estado, ¿qué pasa con la escritura o el disparo de efectos secundarios basados en cambios de Signals? Aquí es donde effect() se convierte en un aliado poderoso.

import { Component, inject, signal, effect } from '@angular/core'; import { Store } from '@ngrx/store'; import { guardarDatosUsuario } from './estado/usuario.actions';  @Component({   selector: 'app-perfil-usuario',   standalone: true,   template: `     
Perfil de Usuario
               Guardar   ` }) export class PerfilUsuarioComponent {   private store = inject(Store);    nombreUsuario = signal('');   emailUsuario = signal('');    constructor() {     // Un efecto que escucha cambios en nombreUsuario o emailUsuario     // y dispara una acción NgRx para guardar los cambios automáticamente.     effect(() => {       const nombre = this.nombreUsuario();       const email = this.emailUsuario();       // Solo disparamos la acción si ambos tienen valores y han cambiado       if (nombre && email && (this.initialNombre !== nombre || this.initialEmail !== email)) {         this.store.dispatch(guardarDatosUsuario({ nombre, email }));       }     }, { allowSignalWrites: false }); // Ojo: allowSignalWrites para evitar bucles.   }    guardarCambios() {     // También puedes disparar la acción manualmente     this.store.dispatch(guardarDatosUsuario({       nombre: this.nombreUsuario(),       email: this.emailUsuario()     }));   } }

El effect() en el constructor observa los cambios en nombreUsuario y emailUsuario. Si cualquiera de estas señales cambia, el efecto se ejecuta y puede disparar una acción NgRx, sincronizando el estado local del componente (gestionado por Signals) con el estado global de NgRx. Esta es una forma potente de desacoplar la lógica de presentación de la lógica de negocio y de persistencia.

Cuándo Usar NgRx y Cuándo Signals

La clave para una arquitectura moderna en Angular 2026 es la complementariedad:

• NgRx (o soluciones similares): Ideal para el estado global de la aplicación que necesita ser compartido entre múltiples componentes distantes, persistido, tener un historial de acciones (dev tools), y manejar efectos secundarios complejos (llamadas a API, etc.). Sigue siendo excelente para arquitecturas escalables donde la consistencia y la trazabilidad del estado son críticas.
• Angular Signals: Perfecto para la gestión de estado local dentro de un componente o entre componentes muy cercanos. Es ideal para la reactividad UI, datos derivados, y la optimización del rendimiento a nivel de componente. Simplifica la reactividad en plantillas y reduce la necesidad de RxJS para casos de uso sencillos.

La combinación óptima implica usar NgRx para tu «source of truth» global y Signals para la reactividad en el «edge» de tu aplicación, es decir, en los componentes individuales que consumen ese estado global y manejan su propia reactividad interna.

Buenas Prácticas y Patrones Avanzados con Signals

Inyección de Signals

Para reutilizar la lógica de Signals a través de la aplicación, puedes inyectar Signals como servicios, utilizando el nuevo modelo de inyección de Angular.

import { Injectable, signal, computed } from '@angular/core';  @Injectable({ providedIn: 'root' }) export class UserService {   private _currentUser = signal<{ id: number; name: string } | null>(null);    currentUser = this._currentUser.asReadonly();   isLoggedIn = computed(() => this.currentUser() !== null);    login(user: { id: number; name: string }) {     this._currentUser.set(user);   }    logout() {     this._currentUser.set(null);   } }

Luego, puedes inyectar UserService en cualquier componente y acceder a currentUser() o isLoggedIn(), que son señales reactivas.

Signals en Servicios y Composables

Crear «composables» o «reactivity providers» usando Signals y la función inject() es un patrón emergente y muy potente para encapsular lógica reactiva reutilizable sin necesidad de clases:

import { signal, computed, effect, inject } from '@angular/core';  export function useContador(initialValue = 0) {   const count = signal(initialValue);   const doubleCount = computed(() => count() * 2);    effect(() => {     console.log(`Contador en composable: ${count()}`);   });    return {     count: count.asReadonly(),     doubleCount,     increment: () => count.update(val => val + 1),     decrement: () => count.update(val => val - 1)   }; }  // En un componente @Component({...}) export class MyComponent {   private contadorState = useContador(10);   contador = this.contadorState.count;   dobleContador = this.contadorState.doubleCount;    onIncrement() {     this.contadorState.increment();   } }

Este patrón es inspirador en frameworks como Vue (Composition API) o SolidJS y permite una modularización del estado y la lógica reactiva sin la sobrecarga de un servicio completo si no es necesario un estado singleton global.

Consideraciones de Rendimiento y Aplicaciones «Zone-less»

La introducción de Signals es un paso crucial hacia la erradicación gradual de Zone.js en Angular. Al permitir que el framework conozca explícitamente qué datos son reactivos y dónde se consumen, Angular puede optimizar el ciclo de cambio de detección de manera sin precedentes. En una aplicación «zone-less» o con un uso mínimo de Zone.js:

• Los componentes con ChangeDetectionStrategy.OnPush se benefician enormemente, ya que la detección de cambios se activará solo cuando las señales que consumen realmente cambien, en lugar de depender de eventos asíncronos en todo el árbol de componentes.
• Se reduce la sobrecarga de Zone.js, lo que lleva a un menor tamaño del bundle y un mejor rendimiento en general, especialmente en aplicaciones con muchas actualizaciones de UI.
• La depuración de rendimiento se simplifica, ya que el flujo de datos es más transparente y predecible.

Es importante recordar que, aunque Signals reduce la dependencia de Zone.js, no lo elimina completamente de inmediato para todas las funcionalidades (como la detección de cambios para @Input()s que no son señales o eventos DOM nativos que aún necesitan un «monkey-patching» o un manejador explícito para activar el CD). Sin embargo, el camino hacia aplicaciones más ligeras y rápidas está claro.

El Futuro de la Reactividad en Angular (Post-2025)

Mirando hacia el futuro (más allá de 2026), es probable que veamos una mayor consolidación de Signals como el método preferido para la reactividad en Angular. La comunidad de NgRx ya está explorando y desarrollando soluciones como ngrx/signals (o @ngrx/signal-store), que ofrecen una API «signals-first» para la gestión de estado global, posiblemente simplificando el boilerplate actual de NgRx al utilizar Signals internamente. Esto no significa la muerte de NgRx, sino su evolución para integrarse sin problemas con las capacidades reactivas nativas de Angular. La capacidad de Angular para adoptar nuevas ideas mientras mantiene la estabilidad es una de sus mayores fortalezas, y la integración de Signals con el ecosistema de NgRx es un testimonio de ello.

Conclusión

Angular Signals ha llegado para transformar la forma en que gestionamos el estado y la reactividad en nuestras aplicaciones Angular. Su simplicidad, eficiencia y granularidad lo convierten en una herramienta indispensable para el desarrollo moderno. Lejos de reemplazar soluciones probadas como NgRx, Signals emerge como un potente complemento, permitiendo a los desarrolladores construir arquitecturas híbridas que aprovechan lo mejor de ambos mundos: la robustez del estado global de NgRx y la reactividad local y el rendimiento optimizado de Angular Signals. Adoptar estas tecnologías y entender cómo interoperan es clave para construir aplicaciones Angular de próxima generación que sean performantes, mantenibles y preparadas para el futuro.