Créer un SignalStore
Définissez l’état avec signalStore et withState
Créer un SignalStore est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Qu’est-ce que SignalStore ?
SignalStore de NgRx est une solution légère de gestion d’état fondée sur les signaux Angular. Vous composez un store à partir de fonctionnalités comme withState, withComputed et withMethods.
Installation
SignalStore se trouve dans le paquet @ngrx/signals. Ajoutez-le à votre projet Angular, puis importez les éléments de construction dont vous avez besoin.
// terminal
// ng add @ngrx/signals
import { signalStore, withState } from '@ngrx/signals';Fabrique signalStore
signalStore() renvoie une classe injectable. Transmettez-lui des fonctionnalités qui décrivent l’état et le comportement. Par défaut, le store est fourni à la racine.
export const CounterStore = signalStore(
{ providedIn: 'root' },
withState({ count: 0 })
);withState
withState(initial) définit l’état initial. Chaque propriété de premier niveau devient un signal sur le store ; ainsi, store.count est un signal que vous appelez avec store.count().
withState({
count: 0,
user: null as User | null,
items: [] as Item[]
});Injecter le store
Comme la fabrique renvoie une classe injectable, vous l’injectez comme n’importe quel service et lisez ses signaux d’état dans les modèles.
@Component({
template: '<p>{{ store.count() }}</p>'
})
export class CounterComponent {
store = inject(CounterStore);
}patchState
Mettez à jour l’état de SignalStore avec l’utilitaire patchState. Il accepte le store ainsi que des objets d’état partiels ou des fonctions de mise à jour, et les applique de manière immuable.
import { patchState } from '@ngrx/signals';
patchState(store, { count: 5 });
patchState(store, (s) => ({ count: s.count + 1 }));Fragments d’état sous forme de signaux
Chaque clé d’état est exposée comme un signal individuel. La lecture d’un fragment ne vous lie pas aux autres, et les modèles ne sont mis à jour que pour les fragments qu’ils lisent.
// given withState({ count: 0, name: '' })
store.count(); // number signal
store.name(); // string signalTypage de l’état
Déclarez explicitement le type de votre état pour les champs pouvant être nuls ou contenant des tableaux, afin que SignalStore déduise les types de signaux corrects. Utilisez des conversions as dans l’objet initial.
type State = { user: User | null; loading: boolean };
withState<State>({ user: null, loading: false });Fourni localement ou à la racine
Omettez providedIn pour créer un store limité au composant ; ajoutez le store aux providers du composant. Chaque instance du composant dispose ainsi de son propre état isolé.
@Component({
providers: [CounterStore]
})
export class WidgetComponent {
store = inject(CounterStore);
}Composer des fonctionnalités
La puissance de SignalStore réside dans la composition : répertoriez plusieurs fonctionnalités et elles fusionneront en un seul store. L’ordre est important, car les fonctionnalités suivantes peuvent lire celles qui les précèdent.
export const TodoStore = signalStore(
withState({ todos: [] as Todo[] })
// withComputed(...), withMethods(...) added next
);Sans code répétitif
Contrairement au NgRx classique de style Redux (actions, réducteurs, effets et sélecteurs), SignalStore regroupe l’état et la logique dans un store déclaratif unique, avec beaucoup moins de code répétitif.
Vérification rapide
Vérifiez vos connaissances de base sur SignalStore.
Récapitulatif
Vous avez créé un SignalStore avec signalStore() et withState, lu des fragments d’état sous forme de signaux, les avez mis à jour de manière immuable avec patchState, et choisi entre des stores fournis à la racine ou limités au composant. Ensuite : les valeurs calculées et les méthodes.
Questions Fréquemment Posées
La leçon « Créer un SignalStore » est-elle gratuite ?
Oui — le texte complet de « Créer un SignalStore » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Créer un SignalStore » ?
Définissez l’état avec signalStore et withState Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Créer un SignalStore » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Créer un SignalStore
- État calculé et méthodes
- rxMethod pour les opérations asynchrones
- Entités et fonctionnalités personnalisées