Crear un SignalStore
Definir el estado con signalStore y withState
Crear un SignalStore es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 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.
Qué es SignalStore
SignalStore de NgRx es una solución ligera de gestión de estado basada en señales de Angular. Puede componer un store a partir de features como withState, withComputed y withMethods.
Instalación
SignalStore se encuentra en el paquete @ngrx/signals. Añádalo a su proyecto Angular e importe después los bloques de construcción que necesite.
// terminal
// ng add @ngrx/signals
import { signalStore, withState } from '@ngrx/signals';Factory signalStore
signalStore() devuelve una clase inyectable. Pase features que describan el estado y el comportamiento. De forma predeterminada, el store se proporciona en root.
export const CounterStore = signalStore(
{ providedIn: 'root' },
withState({ count: 0 })
);withState
withState(initial) define el estado inicial. Cada propiedad de primer nivel se convierte en una señal del store, por lo que store.count es una señal que se invoca como store.count().
withState({
count: 0,
user: null as User | null,
items: [] as Item[]
});Inyectar el store
Como la factory devuelve una clase inyectable, puede inyectarla como cualquier servicio y leer sus señales de estado en las plantillas.
@Component({
template: '<p>{{ store.count() }}</p>'
})
export class CounterComponent {
store = inject(CounterStore);
}patchState
Actualice el estado de SignalStore con el helper patchState. Este acepta el store y objetos de estado parciales o funciones actualizadoras, y aplica las actualizaciones de forma inmutable.
import { patchState } from '@ngrx/signals';
patchState(store, { count: 5 });
patchState(store, (s) => ({ count: s.count + 1 }));Porciones del estado como señales
Cada clave del estado se expone como una señal independiente. Leer una porción no le vincula con las demás, y las plantillas solo se actualizan para las porciones que leen.
// given withState({ count: 0, name: '' })
store.count(); // number signal
store.name(); // string signalTipar el estado
Tipifique explícitamente el estado para los campos que admiten null o son arrays, de modo que SignalStore infiera los tipos correctos de las señales. Use conversiones con as en el objeto inicial.
type State = { user: User | null; loading: boolean };
withState<State>({ user: null, loading: false });Proporcionado localmente o en root
Omita providedIn para crear un store con ámbito de componente; añada el store a los providers del componente. Así, cada instancia del componente obtiene su propio estado aislado.
@Component({
providers: [CounterStore]
})
export class WidgetComponent {
store = inject(CounterStore);
}Componer features
La potencia de SignalStore reside en la composición: indique varias features y estas se combinarán en un solo store. El orden importa, porque las features posteriores pueden leer las anteriores.
export const TodoStore = signalStore(
withState({ todos: [] as Todo[] })
// withComputed(...), withMethods(...) added next
);Sin código repetitivo
A diferencia del NgRx clásico al estilo Redux (actions, reducers, effects y selectors), SignalStore reúne el estado y la lógica en un único store declarativo con mucho menos código repetitivo.
Comprobación rápida
Compruebe sus conocimientos básicos de SignalStore.
Resumen
Creó un SignalStore con signalStore() y withState, leyó porciones del estado como señales, las actualizó de forma inmutable mediante patchState y eligió entre stores proporcionados en root y con ámbito de componente. A continuación: computed y methods.
Preguntas frecuentes
¿La lección «Crear un SignalStore» es gratis?
Sí — el texto completo de «Crear un SignalStore» 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 «Crear un SignalStore»?
Definir el estado con signalStore y withState 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 1 de 4.
¿Cuánto tiempo toma la lección «Crear un SignalStore»?
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