Aktualisierung der Benutzeroberfläche Basierend auf Asynchronen Ergebnissen

Was Sie erstellen

Jetzt verbinden Sie den asynchronen Status mit der Benutzeroberfläche.

Auslösen des Fetch-Vorgangs

Dispatch der asynchronen Aktion beim Laden der Komponente:

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchPosts } from './postsThunk';

function Posts() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);
}

Synchronisierung der Benutzeroberfläche

Nachdem die Aktion ausgelöst wurde:

• Redux aktualisiert den Status;
• Komponenten werden automatisch neu gerendert;
• Die Benutzeroberfläche zeigt die aktuellen Daten an.

Das Ergebnis

Die Benutzeroberfläche reagiert jetzt auf echte Daten:

• Zeigt Ladezustand an;
• Stellt Ergebnisse dar;
• Behandelt Fehler.