Updating UI Based on Async Results

What You Are Building

Now you connect async state to the UI.

Triggering the Fetch

Dispatch the async action when the component loads:

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

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

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

Keeping UI in Sync

Once the action is dispatched:

• Redux updates the state;
• Components re-render automatically;
• UI reflects the latest data.

The Result

Your UI now responds to real data:

• Shows loading;
• Displays results;
• Handles errors.