Asynchrone Datenverarbeitung in der Anwendung

Nun fügen Sie Daten hinzu, die von außerhalb der App stammen. Anstatt mit einer leeren Liste zu beginnen, laden Sie Aufgaben von einer API.

Erstellen der asynchronen Aktion

Aktualisieren Sie Ihren Slice und fügen Sie createAsyncThunk hinzu:

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

Umgang mit asynchronen Zuständen

Aktualisieren Sie Ihren Slice, um Ladevorgänge und Fehler zu verfolgen:

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

Füge extraReducers hinzu:

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

Auslösen des Fetch-Vorgangs

Dispatch der Aktion beim Laden der Komponente:

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

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

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

Asynchrone Logik zur Anwendung hinzugefügt. Aufgaben werden nun von einer API geladen und der Status verfolgt Lade-, Erfolgs- und Fehlerzustände.