El template de NgRx Store que te ahorra montar el boilerplate desde cero

¿Qué es NgRx y cuándo lo necesitas?

NgRx es una implementación del patrón Redux para Angular basada en RxJS. El estado de la app vive en un único store inmutable; los componentes despachan acciones, los reducers producen el nuevo estado y los selectors lo exponen al template. Es la solución correcta cuando el estado es compartido entre rutas no relacionadas, cuando necesitas trazabilidad de cambios o cuando el equipo es grande y necesita un contrato claro.

// El flujo NgRx en una línea:
// Componente → dispatch(action) → reducer → nuevo estado → selector → template

Cuándo usar NgRx (y cuándo no)

• Úsalo cuando el estado es compartido entre rutas: Si dos componentes en rutas distintas necesitan el mismo dato y no tienen relación padre-hijo, el store es la respuesta correcta.
• Úsalo cuando necesitas trazabilidad: DevTools de NgRx permite viajar en el tiempo entre estados, reproducir bugs y ver cada acción despachada. Imprescindible en apps complejas.
• No lo uses para estado local de componente: Un contador en un componente, el estado abierto/cerrado de un modal, el valor de un input — eso va en signal() o en el propio componente, no en el store.
• No lo uses en apps pequeñas: El boilerplate de NgRx tiene un coste real. Para apps de una o dos páginas, un servicio con signals es suficiente y mucho más rápido de mantener.

Las piezas del store y cómo encajan

• createFeature(): Define el nombre del slice, el reducer y el estado inicial en una sola llamada. NgRx genera automáticamente el selector base (selectFeatureState) y un selector por cada propiedad del estado.
• createActionGroup(): Agrupa todas las acciones de un dominio bajo un source común. Elimina los magic strings, mejora el log del DevTools y hace que el código sea autocomplete-friendly.
• createEffect(): Maneja side effects: llamadas HTTP, localStorage, WebSockets. Recibe acciones, aplica operadores RxJS y despacha nuevas acciones. Siempre incluye manejo de error para que el stream no muera.
• createSelector(): Selectors derivados con memoización. Si los inputs no cambiaron, devuelve el valor cacheado sin recalcular. Compón selectors simples para construir proyecciones complejas.

Integración con Signals

• toSignal(store.select(selector)): Convierte cualquier selector en una signal. El template lee la signal directamente sin async pipe. La suscripción se limpia sola cuando el componente se destruye.
• selectSignal() en el store: Atajo oficial: store.selectSignal(miSelector) hace lo mismo que toSignal(store.select(miSelector)) en menos código.
• dispatch desde un componente standalone: Inyecta Store con inject(Store), despacha con store.dispatch(miAccion({ payload })). Sin módulos, sin providers adicionales si ya tienes provideStore() en el bootstrap.

Errores frecuentes al montar el store

• Effects sin catchError: Si un effect falla sin catchError, el Observable muere y ese effect deja de funcionar para siempre en esa sesión. Siempre atrapa el error dentro del operador interno (switchMap, concatMap) para que el stream externo siga vivo.
• Mutar el estado en el reducer: NgRx asume inmutabilidad. Si mutas el objeto en lugar de retornar uno nuevo, los selectors no detectan el cambio. Usa el spread operator o Immer.
• Selectors demasiado grandes: Un selector que devuelve todo el feature state obliga a Angular a re-renderizar aunque solo cambie una propiedad. Crea selectores granulares por propiedad.
• Dispatchar en el constructor: Despacha acciones de carga en ngOnInit o con un resolver, nunca en el constructor. El store puede no estar listo todavía.