Oppdatering av UI basert på asynkrone resultater

Hva du bygger

Nå kobler du asynkron tilstand til brukergrensesnittet.

Utløse henting

Send den asynkrone handlingen når komponenten lastes inn:

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

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

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

Holde UI i synk

Når handlingen er sendt:

• Redux oppdaterer tilstanden;
• Komponenter rendres automatisk på nytt;
• Brukergrensesnittet viser de nyeste dataene.

Resultatet

Brukergrensesnittet ditt reagerer nå på ekte data:

• Viser lasting;
• Viser resultater;
• Håndterer feil.