Hantering av asynkron data i applikationen

Nu lägger du till data som kommer utifrån appen. Istället för att börja med en tom lista, kommer du att ladda uppgifter från ett API.

Skapa den asynkrona åtgärden

Uppdatera din slice och lägg till 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();
});

Hantera asynkrona tillstånd

Uppdatera din slice för att spåra laddning och fel:

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

Lägg till 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;
    });
}

Utlösning av hämtning

Skicka åtgärden när komponenten laddas:

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

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

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

Asynkron logik har lagts till i applikationen. Uppgifter hämtas nu från ett API, och tillståndet spårar laddning, lyckad och felstatus.