Aggiornamento dell'interfaccia utente in base ai risultati asincroni

Cosa Stai Costruendo

Ora colleghi lo stato asincrono all'interfaccia utente.

Attivare il Fetch

Esegui il dispatch dell'azione asincrona quando il componente viene caricato:

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

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

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

Mantenere la UI Sincronizzata

Una volta che l'azione viene eseguita:

• Redux aggiorna lo stato;
• I componenti vengono renderizzati automaticamente;
• L'interfaccia utente riflette i dati più recenti.

Il Risultato

L'interfaccia utente ora risponde ai dati reali:

• Mostra il caricamento;
• Visualizza i risultati;
• Gestisce gli errori.