Angular + NgRx Signal Store: la forma más simple y clara de gestionar estado en Angular

Angular Signal Store es una de las soluciones más eficientes para manejar estado en aplicaciones Angular modernas. Reduce el boilerplate, mejora la mantenibilidad y acelera el desarrollo, especialmente en proyectos pequeños y medianos. Su diseño basado en state → computed → methods lo convierte en una alternativa liviana al NgRx clásico.

¿Qué es NgRx Signal Store y por qué tantos desarrolladores están migrando?

NgRx Signal Store combina lo mejor de NgRx con los signals nativos de Angular, permitiendo reactividad inmediata sin reducers, acciones ni efectos. El resultado es un flujo limpio que reduce fricción en más del 80% de los casos comunes.

• Menos archivos y menos ruido.
• Sin selectores ni efectos innecesarios.
• Menos streams, más signals.
• Curva de aprendizaje más corta.
• Estructura clara y fácil de testear.

Ejemplo práctico usando NgRx Signal Store

A continuación puedes ver un ejemplo completo de un contador implementado con Signal Store:

//counter.component.html
<h2>Count: {{ store.count() }}</h2>

<p>Double: {{ store.double() }}</p>

<p>Is Even? {{ store.isEven() ? 'Yes' : 'No' }}</p>

<button (click)="store.increment()">Increment</button>
<button (click)="store.decrement()">Decrement</button>
<button (click)="store.reset()">Reset</button>

//counter.store.ts
import { Component, computed, inject } from '@angular/core';
import { patchState, signalStore, withComputed, withMethods, withState } from '@ngrx/signals';

// Define your store with state, computed values, and methods
export const CounterStore = signalStore(
  withState({ count: 0 }),
  withComputed(({ count }) => ({
    double: computed(() => count() * 2),
    isEven: computed(() => count() % 2 === 0),
  })),
  withMethods((store) => ({
    increment: () => patchState(store, { count: store.count() + 1 }),
    decrement: () => patchState(store, { count: store.count() - 1 }),
    reset: () => patchState(store, { count: 0 }),
  }))
);

//counter.component.ts
import { Component, inject } from '@angular/core';
import { CounterStore } from './counter.store;
@Component({
  selector: 'app-counter',
  standalone: true,
  providers: [CounterStore],
  templateUrl: './counter.component.html',
})
export class CounterComponent {
  readonly store = inject(CounterStore);
}

¿Cuándo deberías usar Signal Store?

Signal Store es ideal para features pequeñas y medianas donde NgRx clásico puede ser demasiado pesado. Si buscas reactividad simple, velocidad de desarrollo y menos fricción, es la mejor opción.

• Dashboards y componentes interactivos.
• Módulos con estado local.
• Sistemas donde se busca más claridad y menos arquitectura compleja.
• Equipos nuevos en Angular.

Conclusión

NgRx Signal Store simplifica la gestión de estado eliminando reducers, efectos y selectores innecesarios. Es una de las opciones más claras, ligeras y eficientes para manejar estado reactivo en Angular.

---

Agradecimiento especial: Este artículo está inspirado en el excelente aporte de Arturo López Márquez.
🔗 Publicación original: Ver en LinkedIn