Gestión de Datos Asíncronos en la Aplicación

Ahora se agregan datos que provienen de fuera de la aplicación. En lugar de comenzar con una lista vacía, se cargarán tareas desde una API.

Creación de la acción asíncrona

Actualiza tu slice y agrega 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();
});

Manejo de estados asíncronos

Actualiza tu slice para rastrear la carga y los errores:

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

Agregar 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;
    });
}

Disparar la obtención de datos

Despachar la acción cuando el componente se monta:

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

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

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

Se añadió lógica asíncrona a la aplicación. Las tareas ahora se cargan desde una API y el estado rastrea los estados de carga, éxito y error.