0Pricing
Angular Academy · Lektion

Einen SignalStore erstellen

Zustand mit signalStore und withState definieren

Einen SignalStore erstellen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist SignalStore

Der NgRx SignalStore ist eine schlanke Lösung für die Zustandsverwaltung auf Basis von Angular Signals. Sie setzen einen Store aus Features wie withState, withComputed und withMethods zusammen.

Installation

SignalStore befindet sich im Paket @ngrx/signals. Fügen Sie es Ihrem Angular-Projekt hinzu und importieren Sie anschließend die benötigten Bausteine.

// terminal
// ng add @ngrx/signals
import { signalStore, withState } from '@ngrx/signals';

signalStore-Factory

signalStore() gibt eine injizierbare Klasse zurück. Übergeben Sie Features, die den Zustand und das Verhalten beschreiben. Standardmäßig wird der Store im Root-Bereich bereitgestellt.

export const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 })
);

withState

withState(initial) definiert den initialen Zustand. Jede Eigenschaft der obersten Ebene wird zu einem Signal im Store, sodass store.count ein Signal ist, das Sie mit store.count() auslesen.

withState({
  count: 0,
  user: null as User | null,
  items: [] as Item[]
});

Den Store injizieren

Da die Factory eine injizierbare Klasse zurückgibt, injizieren Sie sie wie jeden Service und lesen ihre Zustands-Signals in Templates aus.

@Component({
  template: '<p>{{ store.count() }}</p>'
})
export class CounterComponent {
  store = inject(CounterStore);
}

patchState

Aktualisieren Sie den Zustand des SignalStore mit der Hilfsfunktion patchState. Sie akzeptiert den Store sowie Teilzustandsobjekte oder Updater-Funktionen und wendet die Änderungen unveränderlich an.

import { patchState } from '@ngrx/signals';

patchState(store, { count: 5 });
patchState(store, (s) => ({ count: s.count + 1 }));

Zustandsabschnitte als Signals

Jeder Zustandsschlüssel wird als eigenes Signal bereitgestellt. Wenn Sie einen Abschnitt lesen, sind Sie nicht an andere Abschnitte gekoppelt, und Templates werden nur für die von ihnen gelesenen Abschnitte aktualisiert.

// given withState({ count: 0, name: '' })
store.count();  // number signal
store.name();   // string signal

Zustand typisieren

Typisieren Sie Ihren Zustand für nullable Felder oder Array-Felder explizit, damit SignalStore die korrekten Signaltypen ableiten kann. Verwenden Sie im initialen Objekt Typumwandlungen mit as.

type State = { user: User | null; loading: boolean };

withState<State>({ user: null, loading: false });

Lokal oder im Root-Bereich bereitgestellt

Lassen Sie providedIn weg, um einen auf eine Komponente begrenzten Store zu erstellen, und fügen Sie den Store zu den providers der Komponente hinzu. Dadurch erhält jede Komponenteninstanz ihren eigenen isolierten Zustand.

@Component({
  providers: [CounterStore]
})
export class WidgetComponent {
  store = inject(CounterStore);
}

Features kombinieren

Die Stärke von SignalStore liegt in der Komposition: Listen Sie mehrere Features auf, die zu einem Store zusammengeführt werden. Die Reihenfolge ist wichtig, da spätere Features auf frühere zugreifen können.

export const TodoStore = signalStore(
  withState({ todos: [] as Todo[] })
  // withComputed(...), withMethods(...) added next
);

Kein Boilerplate-Code

Im Gegensatz zum klassischen Redux-artigen NgRx (Actions, Reducer, Effects, Selektoren) bündelt SignalStore Zustand und Logik in einem deklarativen Store – mit deutlich weniger Boilerplate-Code.

Kurze Überprüfung

Überprüfen Sie Ihre Grundlagen zu SignalStore.

Zusammenfassung

Sie haben mit signalStore() und withState einen SignalStore erstellt, Zustandsabschnitte als Signals gelesen, sie mit patchState unveränderlich aktualisiert und zwischen Root- und komponentenbezogenen Stores gewählt. Als Nächstes folgen berechnete Werte und Methoden.

Häufig gestellte Fragen

Ist die Lektion „Einen SignalStore erstellen“ kostenlos?

Ja — der vollständige Text von „Einen SignalStore erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Einen SignalStore erstellen“?

Zustand mit signalStore und withState definieren Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Einen SignalStore erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Einen SignalStore erstellen
  2. Computed und Methoden
  3. rxMethod für asynchrone Aufgaben
  4. Entities und benutzerdefinierte Features
← Zurück zu Angular Academy