Atualizando a UI com Base em Resultados Assíncronos

O que você está construindo

Agora você conecta o estado assíncrono à interface do usuário.

Disparando a busca

Despacho da ação assíncrona quando o componente é carregado:

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

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

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

Mantendo a interface sincronizada

Após o despacho da ação:

• O Redux atualiza o estado;
• Os componentes são renderizados novamente automaticamente;
• A interface reflete os dados mais recentes.

O Resultado

A interface agora responde a dados reais:

• Exibe carregamento;
• Mostra resultados;
• Lida com erros.