Оновлення Інтерфейсу Користувача на Основі Асинхронних Результатів

Що ви створюєте

Тепер ви підключаєте асинхронний стан до інтерфейсу користувача.

Запуск отримання даних

Відправлення асинхронної дії під час завантаження компонента:

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

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

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

Синхронізація інтерфейсу користувача

Після відправлення дії:

• Redux оновлює стан;
• Компоненти автоматично перерендерюються;
• Інтерфейс відображає актуальні дані.

Результат

Тепер ваш інтерфейс реагує на реальні дані:

• Відображає завантаження;
• Показує результати;
• Обробляє помилки.