React Academy · Lección

Lógica asíncrona con createAsyncThunk

Gestione llamadas a API en Redux con createAsyncThunk y el ciclo de vida pending/fulfilled/rejected.

Lógica asíncrona con createAsyncThunk es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección gestionará llamadas a API en Redux con createAsyncThunk y gestionará las acciones pending, fulfilled y rejected del ciclo de vida en su slice.

¿Qué es createAsyncThunk?

createAsyncThunk genera un creador de acciones thunk que envía automáticamente tres acciones del ciclo de vida: pending (iniciada), fulfilled (resuelta) y rejected (fallida). Gestione cada una en extraReducers.

Definir un thunk

Llame a createAsyncThunk con una cadena de tipo y una función asíncrona que cree el payload. Devuelva los datos que desea incluir como payload de fulfilled.

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

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId) => {
    const response = await fetch('/api/users/' + userId);
    return response.json(); // becomes action.payload on fulfilled
  }
);

Gestión en extraReducers

Añada casos para los tres estados del ciclo de vida en extraReducers del slice. Gestione el estado de carga, los datos y los errores según corresponda.

extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => {
      state.loading = true;
      state.error = null;
    })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    })
    .addCase(fetchUser.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    });
}

Enviar el thunk

Envíe el thunk desde un componente con useDispatch. Pase los argumentos directamente al creador de acciones thunk.

const dispatch = useDispatch();
useEffect(() => {
  dispatch(fetchUser(userId));
}, [userId]);

Acceder al estado en el thunk

La función creadora del payload recibe un objeto thunkAPI como segundo argumento. Use thunkAPI.getState() para leer el estado actual de Redux y thunkAPI.dispatch() para enviar otras acciones.

export const saveItem = createAsyncThunk(
  'items/save',
  async (item, { getState }) => {
    const { auth } = getState();
    return fetch('/api/items', {
      method: 'POST',
      headers: { Authorization: 'Bearer ' + auth.token },
      body: JSON.stringify(item),
    }).then(r => r.json());
  }
);

Gestionar errores con rejectWithValue

Para pasar un payload de error personalizado al caso rejected, use thunkAPI.rejectWithValue(). action.payload de la acción rejected contendrá su objeto de error personalizado.

export const fetchData = createAsyncThunk(
  'data/fetch',
  async (id, { rejectWithValue }) => {
    const res = await fetch('/api/' + id);
    if (!res.ok) return rejectWithValue({ status: res.status });
    return res.json();
  }
);
// In rejected case: action.payload.status is available

Cancelar thunks

Pase una señal de AbortController a su fetch dentro del thunk. createAsyncThunk proporciona automáticamente signal mediante thunkAPI.signal cuando el thunk se cancela con dispatch.abort().

async (id, { signal }) => {
  const res = await fetch('/api/' + id, { signal });
  return res.json();
}

Esperar un thunk enviado

La llamada dispatch() de un thunk devuelve una Promise. Puede esperarla para saber cuándo termina el trabajo asíncrono, algo útil en patrones de redirección después de guardar.

const result = await dispatch(saveItem(data));
if (saveItem.fulfilled.match(result)) {
  navigate('/success');
}

Notación de builder frente a notación de objeto

Use el patrón de callback builder.addCase en extraReducers: ofrece seguridad de tipos y es compatible. La notación antigua basada en claves de objeto está obsoleta en las versiones recientes de RTK.

Comprobación rápida

¿Qué ocurre cuando la función asíncrona dentro de createAsyncThunk lanza un error?

Resumen

createAsyncThunk genera automáticamente acciones pending, fulfilled y rejected. Gestione las tres en extraReducers. Use rejectWithValue para payloads de error personalizados y thunkAPI.getState() para acceder al estado actual dentro de los thunks.

A continuación

Siguiente lección: **RTK Query: endpoints y almacenamiento automático en caché** — definirá endpoints de API con createApi y dejará que RTK Query gestione la caché automáticamente.

Preguntas frecuentes

¿La lección «Lógica asíncrona con createAsyncThunk» es gratis?

Sí — el texto completo de «Lógica asíncrona con createAsyncThunk» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Lógica asíncrona con createAsyncThunk»?

Gestione llamadas a API en Redux con createAsyncThunk y el ciclo de vida pending/fulfilled/rejected. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Lógica asíncrona con createAsyncThunk»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Slices de Redux Toolkit y createSlice
Lógica asíncrona con createAsyncThunk
RTK Query: endpoints y almacenamiento automático en caché
Actualizaciones optimistas e invalidación de caché

← Volver a React Academy