Uppdatera UI Baserat på Asynkrona Resultat

Vad du bygger

Nu kopplar du asynkron tillstånd till användargränssnittet.

Utlösning av hämtning

Skicka den asynkrona åtgärden när komponenten laddas:

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

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

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

Hålla UI synkroniserat

När åtgärden har skickats:

• Redux uppdaterar tillståndet;
• Komponenter renderas om automatiskt;
• Användargränssnittet visar de senaste uppgifterna.

Resultatet

Användargränssnittet svarar nu på verkliga data:

• Visar laddning;
• Visar resultat;
• Hanterar fel.