createAsyncThunk para peticiones asíncronas

Contenido del curso

No sé dónde empezar

Conceptos claves para empezar

Introducción a nuestro proyecto

¡Atraparlos ya!

7
Integrar PokeAPI con Axios en React
10:18 min

React.js + Redux

Middlewares

Avanzando la ui

Inmutabilidad

Avanzado

Despedida del curso

22
Reto final: filtro de Pokémon con Redux
02:13 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0018:28

createAsyncThunk para peticiones asíncronas

Curso Profesional de React.js y Redux

Clase 21 de 22

Clase 21 / 22

Recursos

Manejar peticiones asíncronas en Redux solía requerir Redux Thunk, configuración manual y bastante código repetitivo. Con createAsyncThunk de Redux Toolkit puedes centralizar el fetch, el loader y el dispatch en un solo lugar, y este recorrido te muestra cómo hacerlo paso a paso junto con la creación de un UI slice para controlar estados de carga.

¿Qué es createAsyncThunk y por qué reemplaza a Redux Thunk?

Es un método que crea acciones asíncronas integradas al ciclo de vida de Redux Toolkit, así que ya no necesitas instalar Redux Thunk por separado.

¿Qué hace createAsyncThunk? Genera una acción asíncrona que dispara automáticamente tres estados: pending, fulfilled y rejected. Tú solo escribes la lógica del fetch y Redux Toolkit se encarga del resto.

Para declararlo, importa el método desde Redux Toolkit y exporta una constante con el thunk [00:30]. Recibe dos parámetros clave:

El nombre de la acción, siguiendo la convención nombreSlice/nombreType, por ejemplo data/fetchPokemonWithDetails.
El payload creator, que es el callback asíncrono que se ejecuta al disparar la acción.

El payload creator recibe a su vez dos argumentos: los parámetros que envías al llamar la acción (un id, por ejemplo) y el thunkAPI, del cual desestructuramos el dispatch para disparar otras acciones desde dentro [01:30].

¿Cómo se estructura el thunk para traer los pokémon con detalles?

Dentro del callback asíncrono delegamos toda la responsabilidad: disparar el loader, hacer el fetch y volver a disparar el loader al terminar. Así evitas el bug clásico donde el loader se oculta antes de que la lista aparezca, porque ambos disparadores conviven en el mismo flujo [02:20].

El flujo queda así:

dispatch(setLoading(true)) al inicio.
Llamada a la API con getPokemons y luego un Promise.all que mapea cada pokémon a getPokemonWithDetails.
dispatch(setPokemons(pokemonsDetail)) con la lista ya enriquecida.
dispatch(setLoading(false)) al final.

¿Cómo crear un UI slice para manejar el loading?

El UI slice centraliza estados visuales transversales como el loader, modales o notificaciones. Mantenerlo separado del slice de datos respeta el principio de responsabilidad única.

En slices/ui.slice.js importas createSlice y defines tres piezas:

name: 'ui'.
initialState: { loading: false }.
reducers: un setLoading que recibe state y action, y asigna state.loading = action.payload [06:45].

Luego exportas el action creator (export const { setLoading } = uiSlice.actions) y el reducer por defecto (export default uiSlice.reducer). Finalmente registras el reducer dentro del root reducer combinado bajo la llave ui.

¿Por qué puedo mutar el estado dentro del reducer? Redux Toolkit usa Immer internamente, así que escribes código que parece mutable pero produce un estado inmutable de forma segura.

¿Dónde se dispara setLoading dentro del thunk?

Una vez creado el slice, vuelves al dataSlice e importas setLoading. Lo invocas con true antes del fetch y con false después de despachar setPokemons. De este modo el componente se mantiene limpio: solo dispara fetchPokemonWithDetails y olvida toda la coreografía interna [07:50].

En App.js la función fetchPokemon deja de ser asíncrona porque su único trabajo es dispatch(fetchPokemonWithDetails()). También sustituyes los selectores que usaban get de Immutable por accesos directos: state.data.pokemons y state.ui.loading. El shallowEqual se conserva porque sirve para evitar re-renderings y no está atado a Immutable.

¿Qué son los extraReducers y los sufijos pending y fulfilled?

Al abrir Redux DevTools verás acciones que tú no escribiste, como data/fetchPokemonWithDetails/pending y data/fetchPokemonWithDetails/fulfilled. Son los estados que createAsyncThunk emite automáticamente.

Para reaccionar a ellos, Redux Toolkit ofrece la propiedad extraReducers dentro de createSlice, donde puedes escuchar el ciclo de vida del thunk con un builder:

pending: la promesa arrancó.
fulfilled: la promesa resolvió con éxito.
rejected: la promesa falló.

Ahí puedes mover el control del loader o manejar errores sin ensuciar el callback principal [09:40].

¿Cómo limpiar el proyecto al migrar a Redux Toolkit?

Una buena práctica al refactorizar es eliminar lo que ya no usas. En este caso desaparecen:

La carpeta actions con sus actionTypes y actionCreators.
Los reducers individuales viejos de pokemons y ui (sin borrar el root reducer).
Las dependencias immutable y redux-immutable del package.json, ya que Redux Toolkit trae Immer por defecto.

Para desinstalarlas usa npm uninstall immutable redux-immutable o edita el package.json y vuelve a correr npm install [13:10].

¿Y los componentes que disparaban acciones viejas?

En PokemonCard el dispatch apuntaba al action creator antiguo. Cambias el import para que apunte al slice (setFavorite exportado desde dataSlice.actions) y el botón de favoritos vuelve a funcionar sin tocar más lógica.

Con esto tienes una base sólida para escalar: thunks asíncronos limpios, un UI slice reutilizable y un proyecto sin librerías muertas. ¿Qué otro estado global moverías a su propio slice en tu proyecto?

Harold Zurita Simon

Hace un año•editado

✨ Asincronismo con Redux Toolkit usando createAsyncThunk

Redux Toolkit facilita muchísimo el manejo de acciones asincrónicas, y gracias a createAsyncThunk ya no necesitamos usar Redux Thunk manualmente. 🚀

🔧 ¿Qué es createAsyncThunk?

createAsyncThunk es un método que nos permite crear acciones asincrónicas (thunks) sin todo el boilerplate que antes teníamos que escribir.

Recibe dos parámetros:

Nombre del thunk → sigue el formato:

 <nombreDelSlice>/<nombreDelTipo>

Ej: "data/fetchPokemonsWithDetails"

Payload Creator → es una función callback asíncrona donde ponemos la lógica (fetch, dispatch, etc).

El primer parámetro suele ser un argumento que mandamos al thunk. Si no lo necesitamos, usamos un simple _ (underscore).
El segundo parámetro es el thunkAPI, de donde solemos extraer dispatch.

⚙️ Flujo del thunk

Dentro del createAsyncThunk haremos:

1. 🔄 dispatch(setLoading(true))

2. 🐱 Obtener pokemons desde la API

3. 📄 Obtener detalles de cada pokemon

4. 📥 Guardar esos datos en el store

5. 📴 Desactivar el loading

Todo usando acciones de nuestros slices.

🧩 dataSlice — Pokémons

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { getPokemon, getPokemonDetails } from "../api";
import { setLoading } from "./uiSlice";

const initialState = {
  pokemons: [],
};

export const fetchPokemonsWithDetails = createAsyncThunk(
  "data/fetchPokemonsWithDetails",
  async (_, { dispatch }) => {
    dispatch(setLoading(true));

    const pokemonsRes = await getPokemon();
    const pokemonsDetailed = await Promise.all(
      pokemonsRes.map((pokemon) => getPokemonDetails(pokemon))
    );

    dispatch(setPokemons(pokemonsDetailed));
    dispatch(setLoading(false));
  }
);

export const dataSlice = createSlice({
  name: "data",
  initialState,
  reducers: {
    setPokemons: (state, action) => {
      state.pokemons = action.payload;
    },
    setFavorite: (state, action) => {
      const index = state.pokemons.findIndex(
        (pokemon) => pokemon.id === action.payload.pokemonId
      );
      if (index >= 0) {
        state.pokemons[index].favorite = !state.pokemons[index].favorite;
      }
    },
  },
});

export const { setFavorite, setPokemons } = dataSlice.actions;
export default dataSlice.reducer;

🎛 uiSlice — Manejo del loading

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  loading: false,
};

export const uiSlice = createSlice({
  name: "ui",
  initialState,
  reducers: {
    setLoading: (state, action) => {
      state.loading = action.payload;
    },
  },
});

export const { setLoading } = uiSlice.actions;
export default uiSlice.reducer;

🗂 rootReducer — Combinando los slices

import { combineReducers } from "redux";
import dataReducer from "../slices/dataSlice";
import uiReducer from "../slices/uiSlice";

const rootReducer = combineReducers({
  data: dataReducer,
  ui: uiReducer,
});

export default rootReducer;

🪝 Custom Hook — usePokemons

Ahora simplemente llamamos al thunk fetchPokemonsWithDetails sin ninguna sintaxis de ImmutableJS 🎉.

import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { fetchPokemonsWithDetails } from "../slices/dataSlice";
import { useEffect } from "react";

export const usePokemons = () => {
  const pokemons = useSelector((state) => state.data.pokemons, shallowEqual);
  const loading = useSelector((state) => state.ui.loading);
  const dispatch = useDispatch();

  const fetchPokemons = () => {
    dispatch(fetchPokemonsWithDetails());
  };

  useEffect(() => {
    fetchPokemons();
  }, []);

  return {
    pokemons,
    loading,
    fetchPokemons,
  };
};

🧱 PokemonCard — usando setFavorite

import { Card } from "antd";
import Meta from "antd/es/card/Meta";
import StarButton from "./StarButton";
import { useDispatch } from "react-redux";
import { setFavorite } from "../slices/dataSlice";

const PokemonCard = ({ name, image, types, id, favorite }) => {
  const dispatch = useDispatch();
  const typesString = types.map(t => t.type.name).join(", ");

  const handleOnFavorite = () => {
    dispatch(setFavorite({ pokemonId: id }));
  };

  return (
    <Card
      title={name}
      cover={<img src={image} alt={name} />}
      extra={<StarButton isFavorite={favorite} onClick={handleOnFavorite} />}
    >
      <Meta description={typesString} />
    </Card>
  );
};

export default PokemonCard;

🗑 Limpieza final

✔️ Eliminamos archivos que ya no se usan:

actions/
pokemons.js
ui.js

✔️ Quitamos librerías del proyecto:

immutable
redux-immutable

Comentarios (21)21 comentarios

Seba Cardoso

Hace 4 años

Alex Leonardo Rodriguez Carvajal

Wladimir Rocha

DANIEL MURCIA

Hace 3 años

Aaron Fuentevilla

Hace 2 años

Víctor Rolack

Daniel Alejandro Contreras Suárez

Víctor Manuel Morales Hoyos

Carlos Omar Beltran Miguel

Lucia Rodriguez

Andres Prieto

Miguel Angel Reyes Moreno

Moises Hernandez

Ulqernesh Karvenae

Gabriel Fernández Moral

Gonzalo Gutiérrez Castillo

Geovanni Labastida Vázquez

Max Andy Diaz Neyra

César Palma

David Rangel

Hace 6 meses

LUZ ADRIANA GONZALEZ MEJIA

Mariangelica Useche

Team Platzi

Sebastian Carballo

Hace un año

Kengya Moncada

N40 M10

Juan Pablo Avilan

Conceptos claves para empezar

Curso profesional de React JS y Redux

Principios de Redux que todo dev debe saber

Ciclo de vida de datos en Redux

Redux vs Context API en React

Introducción a nuestro proyecto

Qué es la app Pokedux con Redux

Maqueta una Pokédex con React y Ant Design

¡Atraparlos ya!

Integrar PokeAPI con Axios en React

React.js + Redux

Integrando Redux con connect en React

useSelector y useDispatch vs connect en Redux

Redux DevTools para depurar tu store

Middlewares

Creando middlewares personalizados no Redux

Sprites reales con Promise.all en PokeAPI

Redux Thunk para acciones asíncronas

Redux Thunk vs Redux Saga

Avanzando la ui

Loader con Redux y Ant Design Spin

Cómo guardar Pokémon favoritos con Redux

Inmutabilidad

Inmutabilidad en Redux con spread operator

Immutable.js en reducers de Redux

Avanzado

combineReducers para separar data y UI en Redux

Crea tu primer slice con Redux Toolkit

createAsyncThunk para peticiones asíncronas

Despedida del curso

Reto final: filtro de Pokémon con Redux

createAsyncThunk para peticiones asíncronas