Käyttöliittymän päivittäminen asynkronisten tulosten perusteella

Mitä olet rakentamassa

Nyt yhdistät asynkronisen tilan käyttöliittymään.

Haun käynnistäminen

Lähetä asynkroninen toiminto, kun komponentti latautuu:

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

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

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

Käyttöliittymän pitäminen synkronoituna

Kun toiminto lähetetään:

• Redux päivittää tilan;
• Komponentit renderöityvät automaattisesti uudelleen;
• Käyttöliittymä näyttää uusimmat tiedot.

Tulokset

Käyttöliittymäsi reagoi nyt oikeaan dataan:

• Näyttää latauksen;
• Näyttää tulokset;
• Käsittelee virheet.