Manipulação de Dados Assíncronos no Aplicativo

Agora você adiciona dados que vêm de fora do aplicativo. Em vez de começar com uma lista vazia, você irá carregar tarefas de uma API.

Criando a Ação Assíncrona

Atualize seu slice e adicione createAsyncThunk:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchTasks = createAsyncThunk('tasks/fetchTasks', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=5');

  if (!response.ok) {
    throw new Error('Failed to fetch tasks');
  }

  return response.json();
});

Lidando com Estados Assíncronos

Atualize seu slice para rastrear carregamento e erros:

const initialState = {
  items: [],
  status: 'idle',
  error: null
};

Adicione extraReducers:

extraReducers: (builder) => {
  builder
    .addCase(fetchTasks.pending, (state) => {
      state.status = 'loading';
    })
    .addCase(fetchTasks.fulfilled, (state, action) => {
      state.status = 'succeeded';
      state.items = action.payload;
    })
    .addCase(fetchTasks.rejected, (state, action) => {
      state.status = 'failed';
      state.error = action.error.message;
    });
}

Disparo da Busca

Despacho da ação quando o componente é carregado:

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

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

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

Lógica assíncrona adicionada ao aplicativo. As tarefas agora são carregadas de uma API, e o estado acompanha os estados de carregamento, sucesso e erro.