javascript / intermediate
Snippet
Verwalten von mehrstufigen UI-Übergängen mit diskriminierten Zustandsmaschinen-Objekten
Statt mehrere unabhängige boolesche Flags (wie isLoading, isError, isSuccess) zu verwalten, stellt ein einzelnes diskriminiertes Zustandsobjekt mit unveränderlichen String-Konstanten konsistente Zustandsübergänge sicher und vereinfacht den Kontrollfluss mit Switch-Anweisungen.
snippet.js
javascript
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
import { useState } from 'react';const UI_STATUS = Object.freeze({IDLE: 'idle',SUBMITTING: 'submitting',SUCCESS: 'success',FAILURE: 'failure'});export function AsyncActionView() {const [state, setState] = useState({ status: UI_STATUS.IDLE, error: null });const executeAction = async () => {setState({ status: UI_STATUS.SUBMITTING, error: null });try {await new Promise((res) => setTimeout(res, 1000));setState({ status: UI_STATUS.SUCCESS, error: null });} catch (err) {setState({ status: UI_STATUS.FAILURE, error: err.message });}};switch (state.status) {case UI_STATUS.SUBMITTING:return <button disabled>Processing...</button>;case UI_STATUS.SUCCESS:return <p className="success-msg">Operation completed successfully!</p>;case UI_STATUS.FAILURE:return <div className="err-banner">Error: {state.error}</div>;case UI_STATUS.IDLE:default:return <button onClick={executeAction}>Start Action</button>;}}
react
Erklärung
1
const UI_STATUS = Object.freeze({
Erzeugt ein unveränderliches Objekt mit Status-Konstanten, um Tippfehler und ungültige Zustände zu vermeiden.
2
const [state, setState] = useState({ status: UI_STATUS.IDLE, error: null });
Bündelt den aktuellen UI-Status und zugehörige Daten in einem einzigen vorhersagbaren Zustand.
3
switch (state.status) {
Wertet den aktiven Status-Diskriminator aus, um den exakt passenden UI-Zweig darzustellen.
4
case UI_STATUS.SUBMITTING:
Behandelt den asynchronen Zwischenzustand durch Anzeige eines deaktivierten Lade-Buttons.