Angular 21 de Cero a Experto / Servicios y DI

Reto: el BolsilloStore, cerebro reactivo de la app

Reto30 min60 XP

Vas a construir el BolsilloStore completo: el servicio-store con señales que será la fuente de verdad de "Mi Bolsillo" durante todo el curso. Estado privado, lecturas de solo lectura, derivados con computed, acciones controladas y un filtro. Es el patrón que usarás una y otra vez en Angular real —hoy lo dominas construyéndolo y probándolo en vivo—.

Reto

Un store de señales con estado, derivados y acciones

Media30 min60 XP(×2 sin mirar la solución)

Qué debes construir

Un BolsilloStore (clase, como lo sería un @Injectable) con:

Estado privado: una señal _gastos (lista) y una señal _filtro (categoría activa, inicial "todos").
Lecturas de solo lectura: gastos (todos) y filtro.
Derivados con computed: total (suma de todos), gastosVisibles (según el filtro), totalVisible (suma de los visibles) y porCategoria (un objeto con el total por categoría).
Acciones: agregar(nombre, valor, categoria), eliminar(id) y filtrarPor(cat).

El estado nunca se muta desde fuera: solo a través de las acciones.

Reglas

Estado privado, expuesto solo con lecturas de solo lectura y derivados.
Todo lo que se pueda calcular (totales, visibles, agrupados) va en computed, no en estado.
Las acciones son la única vía de cambio, y usan actualizaciones inmutables ([...gs, x], filter, etc.).

30:00

Cuando estés listo, arranca el reloj.

El razonamiento. Un store bien diseñado tiene una regla de oro: el estado mínimo va en señales; todo lo demás se deriva. Aquí el estado real es solo dos cosas: la lista de gastos y el filtro activo. Totales, lista visible, agrupaciones —todo eso se CALCULA de esos dos con computed, y por tanto nunca se desincroniza—. Las acciones son la única puerta de cambio, y aplican actualizaciones inmutables para que las señales detecten el cambio (nuevo array, no el mismo mutado). Este molde —estado privado, lecturas, derivados, acciones— es el que repetirás en cada feature de una app Angular.

Qué observar: al cambiar el filtro con filtrarPor, gastosVisibles y totalVisible se recalculan solos —nunca los tocas a mano—. porCategoria agrupa sin que guardes esa estructura como estado. Y todo cambio pasa por una acción: el estado nunca se corrompe desde fuera. En Angular real, este store sería @Injectable({ providedIn: 'root' }), lo inyectarían la lista, el resumen y el filtro con inject(BolsilloStore), y sus templates se repintarían solos. Acabas de construir el cerebro de tu app.

Qué sigue

Terminaste el módulo de servicios y DI: tienes el store que dará vida a "Mi Bolsillo". Ahora tu app necesita PÁGINAS —una para la lista, otra para el detalle de un gasto, otra para las estadísticas— y una forma de navegar entre ellas. El próximo módulo es el ROUTER de Angular: rutas, parámetros como señales, carga perezosa y guards. Vas a convertir tus componentes en una aplicación de verdad.