Computed y métodos
Añadir estado derivado y métodos de actualización
Computed y métodos es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Más allá del estado sin procesar
Un store útil expone valores derivados y comportamiento. SignalStore los añade con withComputed para los modelos de lectura y withMethods para las acciones.
withComputed
withComputed recibe las señales actuales del store y devuelve un objeto de señales computed(). Estas memorizan su resultado y se actualizan automáticamente, como cualquier computed.
import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';
export const CartStore = signalStore(
withState({ items: [] as Item[] }),
withComputed(({ items }) => ({
count: computed(() => items().length),
total: computed(() => items().reduce((s, i) => s + i.price, 0))
}))
);Leer valores computed
Los miembros computed aparecen en el store igual que el estado. Lea store.count() y store.total() en las plantillas; se actualizan cuando cambia items.
template: 'Items: {{ store.count() }} — {{ store.total() }}'withMethods
withMethods recibe el store y devuelve métodos con nombre. Dentro de ellos, use patchState para actualizar el estado de forma inmutable.
import { withMethods, patchState } from '@ngrx/signals';
withMethods((store) => ({
add(item: Item) {
patchState(store, (s) => ({ items: [...s.items, item] }));
},
clear() {
patchState(store, { items: [] });
}
}))Los métodos también leen el estado
Dentro de un método puede leer las señales actuales del argumento store para tomar decisiones antes de aplicar un cambio.
withMethods((store) => ({
toggle(id: string) {
const exists = store.items().some(i => i.id === id);
if (!exists) return;
patchState(store, (s) => ({
items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
}));
}
}))Los métodos pueden usar computed
Como withComputed se ejecuta antes que withMethods, los métodos pueden leer los miembros computed que el store ya expone.
withMethods((store) => ({
checkout() {
if (store.total() === 0) return;
// proceed...
}
}))Inyectar dependencias
withMethods se ejecuta en un contexto de inyección, por lo que puede llamar a inject() dentro de él para obtener servicios como HttpClient o un router.
withMethods((store, http = inject(HttpClient)) => ({
load() {
http.get<Item[]>('/api/items')
.subscribe(items => patchState(store, { items }));
}
}))Orden de las features
Las features se componen de arriba abajo. Coloque primero withState, después withComputed (lee el estado) y, por último, withMethods (lee el estado y los valores computed). Invertir el orden provoca errores de tipos.
Encapsulación
Los componentes llaman a store.add(item) o leen store.total(). Nunca llaman directamente a patchState, por lo que toda la lógica de mutación permanece dentro del store.
Computed puros, métodos con efectos
Mantenga puras las funciones de withComputed (solo deben derivar valores). Coloque los efectos secundarios, como las llamadas HTTP o la navegación, dentro de withMethods.
Probar métodos
Los SignalStores son clases inyectables. En las pruebas, proporcione el store mediante TestBed, llame a un método y compruebe después el estado y las señales computed de forma síncrona.
const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);Comprobación rápida
Compruebe cuánto entiende los valores computed y los métodos.
Resumen
Enriqueció un SignalStore con withComputed para crear modelos de lectura memorizados y con withMethods para acciones encapsuladas que usan patchState y servicios inyectados. El orden de las features garantiza que cada capa pueda leer las anteriores.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 38
- Lecciones
- 144
Preguntas frecuentes
¿La lección «Computed y métodos» es gratis?
Sí — el texto completo de «Computed y métodos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Computed y métodos»?
Añadir estado derivado y métodos de actualización Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Computed y métodos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Crear un SignalStore
- Computed y métodos
- rxMethod para trabajo asíncrono
- Entidades y funcionalidades personalizadas