Asynchrone Gegevens Verwerken in de App

Nu voeg je gegevens toe die van buiten de app komen. In plaats van te beginnen met een lege lijst, laad je taken vanuit een API.

De asynchrone actie aanmaken

Werk je slice bij en voeg createAsyncThunk toe:

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

Asynchrone statussen afhandelen

Werk je slice bij om laden en fouten bij te houden:

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

Voeg extraReducers toe:

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

Ophalen van gegevens starten

Dispatch de actie wanneer het component laadt:

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

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

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

Je hebt asynchrone logica toegevoegd aan de applicatie. Taken worden nu geladen vanuit een API en de status houdt bij of het laden, gelukt of mislukt is.