javascript / expert
Snippet
Reaktive Zustandsautomaten für komplexe UI-Übergänge
Zustandsautomaten (FSM) verhindern 'unmögliche Zustände' in komplexen UIs. Die Kombination von FSMs mit Svelte-Runen stellt sicher, dass Zustandsübergänge vorhersehbar sind und die UI nur dann neu rendern, wenn ein gültiger Übergang gemäß der Logik-Map erfolgt.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
type State = 'IDLE' | 'BUSY' | 'ERROR';let current = $state<State>('IDLE');const transitions = {IDLE: { FETCH: 'BUSY' },BUSY: { RESOLVE: 'IDLE', REJECT: 'ERROR' },ERROR: { RETRY: 'BUSY' }};function send(event: string) {const next = transitions[current]?.[event];if (next) current = next;}
svelte
Erklärung
1
let current = $state<State>('IDLE');
Verfolgt den aktuellen Zustand des Automaten reaktiv.
2
const transitions = { ... };
Statische Zuordnung gültiger Zustandsübergänge zur Vermeidung von Logikfehlern.
3
if (next) current = next;
Aktualisiert den Zustand nur, wenn das Ereignis für den aktuellen Zustand gültig ist.