Käyttökokemuksen Parantaminen Lataus- ja Virhetilojen Avulla

Nyt saat sovelluksen tuntumaan käyttäjälle reagoivalta ja selkeältä. Sen sijaan, että näyttäisit tyhjää datan latautuessa, näytät sovelluksen nykyisen tilan.

Käyttöliittymän päivittäminen

Avaa TaskList.jsx ja käytä statusta ja virhettä storesta:

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchTasks } from '../features/tasks/tasksSlice';
import TaskItem from './TaskItem';

function TaskList() {
  const dispatch = useDispatch();
  const { items, status, error } = useSelector((state) => state.tasks);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchTasks());
    }
  }, [dispatch, status]);

  if (status === 'loading') {
    return <p>Loading tasks...</p>;
  }

  if (status === 'failed') {
    return <p>Error: {error}</p>;
  }

  return (
    <ul>
      {items.map((task) => (
        <TaskItem key={task.id} task={task} />
      ))}
    </ul>
  );
}

export default TaskList;

Käyttöliittymä heijastaa nyt tapahtumia:

• Näyttää latauksen, kun dataa haetaan;
• Näyttää tehtävät, kun data on valmis;
• Näyttää virheilmoituksen, jos jokin epäonnistuu.

Käyttäjä saa aina palautetta. Jopa yksinkertaiset viestit tekevät sovelluksesta luotettavamman ja helpomman käyttää.

Asynkroninen tila on nyt yhdistetty käyttöliittymään. Sovellus käsittelee lataus- ja virhetilat ja antaa selkeää palautetta käyttäjälle.