Redux Thunk para acciones 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:0010:16

Redux Thunk para acciones asíncronas

Curso Profesional de React.js y Redux

Clase 13 de 22

Clase 13 / 22

Recursos

Cuando trabajas con Redux puro, los action creators solo permiten flujos síncronos. Pero si necesitas llamar a una API antes de despachar una acción, necesitas un middleware como Redux Thunk, que te permite escribir lógica asíncrona y separar responsabilidades entre componentes y actions.

Qué es Redux Thunk y por qué usarlo

Redux por defecto solo despacha objetos planos de forma síncrona. Aquí es donde entra Thunk como enhancer del store.

Thunk es un concepto de programación donde una función se usa para retrasar la evaluación, el cálculo o la ejecución de una operación. Aplicado a Redux, te permite escribir action creators que en lugar de retornar un objeto, retornan otra función. Esa función recibe el dispatch y decide cuándo y cómo enviar la acción al reducer [01:05].

¿Para qué sirve Redux Thunk? Sirve para despachar acciones asíncronas, retrasar el dispatch hasta que se cumpla una condición y separar la lógica de peticiones HTTP del componente.

Esto es útil, por ejemplo, cuando necesitas obtener los detalles de cada Pokémon desde una API antes de actualizar el estado global.

Cómo crear un action creator asíncrono con Thunk

Primero instala la dependencia con npm install redux-thunk. Luego, dentro de tu carpeta actions, crea un nuevo action creator que retorne una función en lugar de un objeto [02:10].

La estructura básica se ve así:

javascript import { setPokemons } from './index';

export const getPokemonsWithDetails = (pokemons = []) => async (dispatch) => { const pokemonsDetailed = await Promise.all( pokemons.map(pokemon => getPokemonDetail(pokemon)) ); dispatch(setPokemons(pokemonsDetailed)); };

Fíjate en tres detalles importantes:

La función externa recibe los pokemons como parámetro y por defecto es un arreglo vacío.
La función interna recibe el dispatch, equivalente al next de un middleware personalizado.
Dentro usas await para resolver las llamadas a la API, por eso la función debe ser async.

Por qué mover la lógica fuera del componente

Dejar las peticiones dentro del componente mezcla responsabilidades. Tu App.js debería preocuparse por renderizar, no por orquestar llamadas a APIs.

Al mover esa lógica al action creator, el componente queda más limpio: solo despacha getPokemonsWithDetails(pokemons) y olvida cómo se resuelven los detalles. El código se vuelve más legible y testeable.

Cómo integrar Thunk como middleware en el store

La segunda parte es registrar Thunk en la configuración del store. En tu archivo index.js importa el middleware y agrégalo antes de logger [04:30].

javascript import thunk from 'redux-thunk'; import { createStore, applyMiddleware, compose } from 'redux';

const composeAlternative = window.REDUX_DEVTOOLS_EXTENSION_COMPOSE || compose;

const store = createStore( reducer, composeAlternative(applyMiddleware(thunk, logger)) );

El composeAlternative resuelve un conflicto común: la extensión Redux DevTools instalada de forma simple compite con Thunk. Para que ambos convivan, usas el compose que inyecta la extensión cuando existe el objeto window, y si no, vuelves al compose por defecto de Redux.

¿Qué hace __REDUX_DEVTOOLS_EXTENSION_COMPOSE__? Es una función que inyecta la extensión Redux DevTools en el navegador para combinar middlewares y mantener visibles las acciones en el panel de depuración.

Verificar que todo funcione

Tras guardar los cambios e inicializar el servidor, la aplicación debería comportarse igual que antes, pero con responsabilidades mejor distribuidas. En Redux DevTools verás tus acciones despachadas y el estado con la lista completa de Pokémon.

Qué habilidades y conceptos te llevas de esta clase

Más allá del código, hay varias ideas que vale la pena fijar:

Middleware como enhancer del store: Thunk amplía las capacidades nativas de Redux para manejar asincronía [00:35].
Action creators que retornan funciones: el patrón clave que diferencia un thunk de una acción normal [01:50].
Separación de responsabilidades: mover la lógica de API del componente al action creator mejora la mantenibilidad [02:00].
Composición de middlewares con DevTools: el truco del composeAlternative evita conflictos entre Thunk y la extensión del navegador [05:15].
Async/await dentro de Redux: ahora puedes usar Promise.all y await sin romper el flujo de Redux.

Thunk no es la única vía para manejar asincronía en Redux. Otra alternativa muy usada es Redux Saga, que aborda el mismo problema con generadores y un modelo distinto. ¿Has probado alguna de las dos? Cuéntame en los comentarios cuál prefieres y por qué.

Andrés Felipe Eslava Zuluaga

Hace 4 años

Solución de Thunk con TypeScript en la v8.

Quiero aclarar que redux pide que se use RTK para que no existan inconvenientes con el tipado del Disptach Es esta la razón de porque el tipado en mi action-thunk quedó de esta forma que comparto.

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { applyMiddleware, compose, legacy_createStore as createStore } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { pokemonsReducer } from './reducers/pokemons';
import { logger } from './middlewares';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const composedEnhancers = compose(
  applyMiddleware(thunk, logger),
  (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__(),
)

const store = createStore(pokemonsReducer, composedEnhancers);

root.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

// src/api/index.ts

import axios from "axios";
import { IPokemonDetails, IPokemonType } from "../types";
import { PokemonResponseType } from "./responses";

export const getPokemon = async () => {
  const URL = "https://pokeapi.co/api/v2/pokemon?limit=151";
  try {
    const { data } = await axios.get<PokemonResponseType>(URL);
    const { results } = data;
    return results;
  } catch (err) {
    console.error("err ".repeat(5), err);
  }
};

export const getPokemonDetails = async (pokemon: IPokemonType) => {
  try {
    const { data } = await axios.get<IPokemonDetails>(pokemon.url);
    console.log(data)
    return data;
  } catch (err) {
    console.error("err ".repeat(5), err);
  }
};

// src/actions/index.ts

import { IPokemonDetails, IPokemonType } from "../types";
import { Dispatch } from "redux";
import { SET_POKEMONS_DETAILS } from "./types";
import { getPokemonDetails } from "../api";

export const setPokemonsDetails = (
  payload: (IPokemonDetails | undefined)[]
) => ({
  type: SET_POKEMONS_DETAILS,
  payload,
});

export const getPokemonsDetailsAction =
  (pokemons: IPokemonType[]) =>
    // Dispatch se debe tipar para que no ocurran inconvenientes con lo que devuelve 
    async (dispatch: Dispatch<any>) => {
      const pokemonDetails = await Promise.all(
        pokemons.map((pokemon) => pokemon && getPokemonDetails(pokemon))
      );
      dispatch(setPokemonsDetails(pokemonDetails));
  };

// src/App.tsx

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Col } from "antd";
import Searcher from "./components/Searcher";
import PokemonList from "./components/PokemonList";
import { getPokemon } from "./api";
import { getPokemonsDetailsAction } from "./actions";
import { IPokemonDetails } from "./types";

import logo from "./statics/logo.svg";
import "./App.css";
import { Dispatch } from "redux";

type AppType = {
  pokemons: IPokemonDetails[];
};

function App() {
  const pokemons = useSelector((state: AppType) => state.pokemons);
  // Dispatch se debe tipar para que no ocurran inconvenientes con lo que devuelve
  const dispatch = useDispatch<Dispatch<any>>();

  useEffect(() => {
    const fetchPokemons = async () => {
      const response = await getPokemon();
      response && dispatch(getPokemonsDetailsAction(response));
    };

    fetchPokemons();
  }, [dispatch]);

  return (
    <div className="App">
      <Col span={4} offset={10}>
        <img src={logo} alt="Pokedux" />
      </Col>
      <Col span={8} offset={8}>
        <Searcher />
      </Col>
      <PokemonList pokemons={pokemons} />
    </div>
  );
}

export default App;

Comentarios (22)22 comentarios

Gaston Blanco

Diego Vergara

Eloy Bernardez

Juan Camilo Lentino Villalba

Maicol Hernandez

Carlos Alberto Usuga Martinez

Nicolas Esteban Rojas Cuervo

Hace 3 años

Bryan David Castañeda Aranzales

Cayo Legal

Erlyn David Ascarate Lachi

César Palma

Harold Zurita Simon

Hace un año

Gualberto Montiel

Carlos Rodríguez

Luis Enrique Marroquín Orellana

Hace 2 años

Fabián Nava Pereda

David Rangel

Hace 6 meses

Jose Alexis Nuñez Torres

Company_admin

Hace 10 meses

marcos martilotta

Nicolas Agustin Goitia

Emilio Sala

Sebastian Carballo

Nazareno Rosales

Armando Salamanca Ayon

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

Redux Thunk para acciones asíncronas