javascript / intermediate
Snippet
Vorhersehbare Zustandsübergänge mit Zustandsautomaten
Ein endlicher Zustandsautomat (FSM) hilft bei der Verwaltung komplexer UI-Logik, indem er explizite Zustände und gültige Übergänge definiert. Dies verhindert 'unmögliche' Zustände (z. B. gleichzeitig in 'success' und 'loading' zu sein).
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
const stateMachine = {idle: { SUBMIT: 'loading' },loading: { SUCCESS: 'success', FAILURE: 'error' },error: { RETRY: 'loading' },success: {}};function transition(state, action) {return stateMachine[state]?.[action] || state;}let currentState = 'idle';currentState = transition(currentState, 'SUBMIT'); // 'loading'
nextjs
Erklärung
1
stateMachine = { ... }
Ein Konfigurationsobjekt, das aktuelle Zustände und Aktionen dem nächsten Zustand zuordnet.
2
stateMachine[state]?.[action]
Verwendet Optional Chaining, um sicher zu prüfen, ob ein Übergang für die jeweilige Aktion existiert.