Datenabruf mit CreateAsyncThunk

Was Sie erstellen

Abrufen von Daten von einer API mit Redux Toolkit.

Erstellen einer asynchronen Aktion

Redux Toolkit stellt createAsyncThunk zur Verfügung, um asynchrone Logik zu verarbeiten.

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

export const fetchPosts = createAsyncThunk(
  'posts/fetchPosts',
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    return response.json();
  }
);

Verbindung mit dem Slice

Verarbeitung der asynchronen Aktion innerhalb des Slices:

import { createSlice } from '@reduxjs/toolkit';
import { fetchPosts } from './postsThunk';

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    items: [],
    status: 'idle',
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  }
});

export default postsSlice.reducer;

createAsyncThunk ermöglicht eine strukturierte Verarbeitung asynchroner Logik. Der Lade-, Erfolgs- und Fehlerstatus wird automatisch verfolgt.