Mise à jour de l'interface utilisateur en fonction des résultats asynchrones

Ce que vous construisez

Connexion de l'état asynchrone à l'interface utilisateur.

Déclenchement de la récupération

Envoi de l'action asynchrone lors du chargement du composant :

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

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

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

Synchronisation de l'interface utilisateur

Après l'envoi de l'action :

• Mise à jour de l'état par Redux ;
• Rendu automatique des composants ;
• Interface utilisateur reflétant les données les plus récentes.

Le résultat

Votre interface utilisateur réagit désormais aux données réelles :

• Affiche le chargement ;
• Affiche les résultats ;
• Gère les erreurs.