typescript / intermediate
Snippet
Konstruktion eines typsicheren Mikro-Zustandsspeichers mit Abonnements
Frameworks zur zentralen Zustandsverwaltung beruhen auf vorhersagbaren Mutationen und reaktiven Abonnements. Durch Kombination von `Readonly<T>`, `Partial<T>` und `Object.freeze` wird Zustand-Unveränderlichkeit garantiert.
snippet.ts
typescript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
type Listener<S> = (state: Readonly<S>) => void;class Store<S extends object> {private state: S;private listeners = new Set<Listener<S>>();constructor(initialState: S) {this.state = Object.freeze({ ...initialState });}getState(): Readonly<S> {return this.state;}setState(updater: Partial<S> | ((prevState: Readonly<S>) => Partial<S>)): void {const changes = typeof updater === "function" ? updater(this.state) : updater;this.state = Object.freeze({ ...this.state, ...changes });this.listeners.forEach((listener) => listener(this.state));}subscribe(listener: Listener<S>): () => void {this.listeners.add(listener);return () => this.listeners.delete(listener);}}interface CounterState {count: number;lastUpdated: string;}const store = new Store<CounterState>({ count: 0, lastUpdated: "never" });const unsubscribe = store.subscribe((state) => console.log(`Count: ${state.count}`));store.setState({ count: 1, lastUpdated: "now" });unsubscribe();
Erklärung
1
type Listener<S> = (state: Readonly<S>) => void;
Verhindert das direkte Mutieren des Inhalts durch Erfassung als schreibgeschützter Readonly-Typ.
2
setState(updater: Partial<S> | ((prevState: Readonly<S>) => Partial<S>)): void
Akzeptiert funktionale Updates oder partielle Zustandsobjekte für sichere Aktualisierungen.
3
subscribe(listener: Listener<S>): () => void
Registriert Listener und liefert eine Funktion zum Entfernen des Abonnements zurück.