Angular 21 de Cero a Experto / Estado a gran escala

Reto: un SignalStore de features para Mi Bolsillo

Reto40 min100 XP

Este reto integra todo el módulo: vas a construir un SignalStore completo para "Mi Bolsillo" —con estado, derivados, acciones y helpers de entidades— usando el patrón de composición with* que aprendiste, y probándolo en vivo. Cuando funcione, entenderás por dentro cómo NgRx SignalStore organiza el estado de una feature, y tendrás el store definitivo de tu app.

Reto

Un mini-SignalStore componible con entidades

Difícil40 min100 XP(×2 sin mirar la solución)

Qué debes construir

Un signalStore mínimo (el motor) y con él, un BolsilloStore que tenga:

withState: gastos (colección de entidades por id), filtro (categoría activa), presupuesto.
withComputed: total, saldo, gastosVisibles (según filtro) y porCategoria.
withMethods: agregar, eliminar, filtrarPor, fijarPresupuesto, todos con patchState.
withEntities (tu propio bloque): un helper reutilizable que maneje la colección por id con addEntity/removeEntity, para no repetir el filter/spread.

Reglas

El motor signalStore debe COMPONER bloques with* (cada uno añade al store).
patchState actualiza solo las claves que recibe, inmutablemente.
Los derivados deben reaccionar solos a los cambios de estado.

40:00

Cuando estés listo, arranca el reloj.

El razonamiento. El poder de SignalStore está en la COMPOSICIÓN: signalStore no es más que un reduce que pasa un objeto-store por una tubería de bloques with*, y cada bloque le añade propiedades —señales de estado, derivados calculados, métodos—. Esa arquitectura tiene dos virtudes: primero, separa claramente las cuatro responsabilidades (estado / derivados / acciones / helpers); segundo, es EXTENSIBLE —withEntities es solo otro bloque que puedes escribir tú y reutilizar en cada store con colecciones—. Al construir el motor entiendes que NgRx SignalStore no es magia: es composición de funciones sobre señales, exactamente lo que ya dominas.

Qué observar:

El store se ARMA componiendo cuatro bloques: estado, derivados, métodos —y withEntities es la pareja addEntity/removeEntity que los métodos reutilizan—.
Los derivados (total, saldo, gastosVisibles, porCategoria) reaccionan solos a cada acción: nunca los recalculas a mano.
patchState actualiza solo la clave que cambió (los métodos construyen valores inmutables).
Al filtrar, gastosVisibles cambia sin tocar gastos; al cambiar el presupuesto, saldo se recalcula; al eliminar, total baja. Todo por el grafo de señales.

Este es, en miniatura, exactamente el modelo de NgRx SignalStore: signalStore(withState(...), withComputed(...), withMethods(...), withEntities(...)). La versión real añade tipado impecable, integración con DI ({ providedIn: 'root' }), helpers de entidades más completos y utilidades como rxMethod para efectos RxJS. Pero el corazón —composición de bloques sobre señales— es lo que acabas de construir. Ahora entiendes el store definitivo de "Mi Bolsillo" por dentro.

Qué sigue

Terminaste el módulo de estado a gran escala: sabes clasificar el estado, estructurarlo con SignalStore, organizar la app por features y usar facades con criterio. Tu app tiene una columna vertebral de estado sólida. El próximo módulo la lleva a la última frontera: el tiempo real —WebSockets, Socket.io, streams en vivo— para que "Mi Bolsillo" se actualice al instante cuando algo cambia, incluso desde otro dispositivo. La antesala del proyecto final.