Opdatering af UI Baseret på Asynkrone Resultater

Hvad du bygger

Nu forbinder du asynkron tilstand til brugergrænsefladen.

Udløsning af hentning

Udløs den asynkrone handling, når komponenten indlæses:

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

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

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

Synkronisering af brugergrænseflade

Når handlingen er udløst:

• Redux opdaterer tilstanden;
• Komponenter genrender automatisk;
• Brugergrænsefladen afspejler de nyeste data.

Resultatet

Dit brugerinterface reagerer nu på rigtige data:

• Viser indlæsning;
• Viser resultater;
• Håndterer fejl.