Obtención de Datos con createAsyncThunk

Qué estás construyendo

Obtención de datos desde una API utilizando Redux Toolkit.

Creación de una acción asíncrona

Redux Toolkit proporciona createAsyncThunk para gestionar lógica asíncrona.

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

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

Conexión con el slice

Gestión de la acción asíncrona dentro del slice:

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 permite gestionar la lógica asíncrona de manera estructurada. Realiza el seguimiento automático de los estados de carga, éxito y error.