javascript / expert
Snippet
Optimistische UI-Updates mit Status-Rollback
Optimistische UI geht davon aus, dass eine Serveranfrage erfolgreich sein wird, und aktualisiert die Schnittstelle sofort, um sie verzögerungsfrei erscheinen zu lassen. Die Behandlung von Fehlern ist jedoch zwingend erforderlich. Dieses Pattern erfasst den vorherigen Status vor dem Update und ermöglicht einen nahtlosen Rollback, falls die asynchrone Operation fehlschlägt.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const useOptimisticAction = (onSync) => {const [data, setData] = useState(initialData);const execute = async (payload) => {const previousData = data;setData(prev => ({ ...prev, ...payload })); // Optimistictry {await onSync(payload);} catch (err) {setData(previousData); // Rollback on failureconsole.error('Sync failed, rolling back.');}};return [data, execute];};
react
Erklärung
1
const previousData = data;
Snapshot des aktuellen Status, um eine Wiederherstellung bei Netzwerkfehlern zu ermöglichen.
2
setData(prev => ({ ...prev, ...payload }));
Sofortiges UI-Update, bevor der asynchrone Aufruf beginnt.
3
setData(previousData);
Wiederherstellung des Originalzustands, falls der try-catch-Block eine Ablehnung abfängt.