Optimistische UI-Updates mit Status-Rollback

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
javascript
const useOptimisticAction = (onSync) => {
  const [data, setData] = useState(initialData);
 
  const execute = async (payload) => {
    const previousData = data;
    setData(prev => ({ ...prev, ...payload })); // Optimistic
 
    try {
      await onSync(payload);
    } catch (err) {
      setData(previousData); // Rollback on failure
      console.error('Sync failed, rolling back.');
    }
  };
 
  return [data, execute];
};

react

Erklärung

const previousData = data;

Snapshot des aktuellen Status, um eine Wiederherstellung bei Netzwerkfehlern zu ermöglichen.

setData(prev => ({ ...prev, ...payload }));

Sofortiges UI-Update, bevor der asynchrone Aufruf beginnt.

setData(previousData);

Wiederherstellung des Originalzustands, falls der try-catch-Block eine Ablehnung abfängt.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek