Actualización de la Interfaz de Usuario Basada en Resultados Asíncronos

Lo que estás construyendo

Ahora conectas el estado asíncrono con la interfaz de usuario.

Disparar la obtención de datos

Despacho de la acción asíncrona al cargar el componente:

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

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

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

Mantener la interfaz sincronizada

Una vez que se despacha la acción:

• Redux actualiza el estado;
• Los componentes se vuelven a renderizar automáticamente;
• La interfaz refleja los datos más recientes.

El resultado

La interfaz de usuario ahora responde a datos reales:

• Muestra carga;
• Muestra resultados;
• Maneja errores.