UI Bijwerken op Basis van Asynchrone Resultaten

Wat je aan het bouwen bent

Nu koppel je de asynchrone status aan de gebruikersinterface.

Het ophalen activeren

De asynchrone actie dispatchen wanneer het component laadt:

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

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

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

UI gesynchroniseerd houden

Zodra de actie is gedispatched:

• Redux werkt de status bij;
• Componenten renderen automatisch opnieuw;
• De gebruikersinterface toont de meest recente gegevens.

Het resultaat

De gebruikersinterface reageert nu op echte data:

• Toont laden;
• Geeft resultaten weer;
• Verwerkt fouten.