Sprites reales con Promise.all en PokeAPI

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:007:40

Sprites reales con Promise.all en PokeAPI

Curso Profesional de React.js y Redux

Clase 12 de 22

Clase 12 / 22

Recursos

Reemplazar la imagen genérica de Ditto por el sprite real de cada Pokémon es el siguiente paso lógico cuando ya tienes la lista cargada desde PokeAPI. Aquí aprendes a encadenar peticiones, usar Promise.all y conectar los detalles con tu store de Redux para que cada tarjeta muestre su propia cara.

¿Cómo se estructura la respuesta de PokeAPI para obtener sprites?

La primera llamada a getPokemons devuelve una lista con el nombre de cada Pokémon y una URL individual. Esa URL es la puerta de entrada a los detalles completos.

Cuando entras a la URL de un Pokémon específico, el API responde con un objeto extenso que incluye habilidades, formas y, lo que nos interesa ahora, los sprites. Dentro de sprites viven las imágenes en distintas tomas, y la que vamos a usar es frontDefault.

¿Qué son los sprites en PokeAPI? Son las imágenes 2D de cada Pokémon en diferentes ángulos y estados. El campo frontDefault entrega la vista frontal estándar, ideal para tarjetas o listados.

¿Cómo preparar el entorno antes de pedir los detalles?

Antes de tocar la lógica nueva, conviene dejar el código limpio. En el video se hacen tres ajustes rápidos:

Devolver el offset original para trabajar con la primera generación.
Deshabilitar el middleware de Pokémon Eddy y dejar solo el logger.
Inicializar el servidor para confirmar que todo arranca sin errores.

Con esa base limpia, ya puedes concentrarte en obtener los detalles sin ruido de por medio.

¿Cómo usar Promise.all para pedir todos los detalles a la vez?

Después del primer fetch que trae la lista, necesitas una segunda ronda de peticiones: una por cada Pokémon. Hacerlas en serie sería lento, así que entra Promise.all.

Promise.all lanza un conjunto de promesas en paralelo y se resuelve solo cuando todas terminan. Si una falla, falla el bloque completo. Por eso es perfecto para este caso: o tienes todos los detalles, o sabes que algo salió mal.

Dentro de getPokemons, mapeas el resultado original y por cada Pokémon llamas a una nueva función, getPokemonDetails, pasándole el objeto. El await envuelve todo el Promise.all para esperar la resolución conjunta.

¿Por qué usar Promise.all en lugar de un for con await? Porque ejecuta todas las peticiones en paralelo en vez de una tras otra. Para 20 Pokémon, la diferencia entre paralelo y secuencial puede ser de varios segundos.

¿Dónde vive la función getPokemonDetails?

La función se escribe en el archivo api.js, junto al resto de las llamadas. Recibe el objeto Pokémon y devuelve una petición axios.get a la URL que ya viene en la respuesta inicial.

De la respuesta de Axios solo interesa la propiedad data, así que se retorna directamente. El manejo de errores se resuelve con un catch siguiendo el mismo patrón del resto del módulo.

Una vez creada, importas getPokemonDetails en app.js y haces el dispatch de la acción setPokemons, pero ahora pasando el array con los detalles completos en lugar de la lista mínima inicial.

¿Cómo conectar los sprites con el componente Pokémon Card?

Con los detalles ya en el store de Redux, toca propagarlos hacia los componentes visuales. Si abres Redux DevTools y revisas el árbol del estado, vas a ver que cada Pokémon ahora trae su objeto sprites con todas las variantes de imagen.

¿Qué cambios necesita el componente Pokémon Card?

El componente original solo recibía el nombre como prop. Ahora debe aceptar también la imagen:

Agregar image a los props que recibe.
Reemplazar la imagen hardcodeada de Ditto por la prop image.
Cambiar el alt para que use el nombre del Pokémon, no un texto fijo.

Este pequeño refactor convierte la tarjeta en un componente reutilizable y accesible, porque cada imagen tendrá su propia descripción semántica.

¿Cómo enviar la imagen desde Pokémon List?

En el componente padre, PokemonList, pasas la nueva prop al renderizar cada tarjeta. La ruta exacta dentro del objeto es pokemon.sprites.frontDefault.

Al guardar y volver al navegador, cada Pokémon aparece con su propia ilustración. Bulbasaur ya no se ve como Ditto, y la lista cobra identidad visual real.

¿Qué hago si frontDefault llega como null? Algunos Pokémon o formas alternativas no tienen sprite frontal por defecto. Conviene agregar un fallback, ya sea otra variante de sprite o una imagen placeholder, para evitar tarjetas rotas.

¿Cómo aplicar lo mismo con las habilidades de cada Pokémon?

El reto que queda abierto es replicar este flujo, pero con el array abilities que también viene en los detalles. La lógica es idéntica: ya tienes los datos en el estado, solo necesitas pasarlos como prop y renderizarlos en la tarjeta.

Piensa en cómo mostrarlas: ¿una lista debajo del nombre?, ¿badges al lado de la imagen?, ¿solo la habilidad principal? Comparte tu solución en la sección de aportes y cuéntanos qué decisión de diseño tomaste.

Andrés Felipe Eslava Zuluaga

Hace 4 años

Mi seguimiento con TypeScript. He tenido que cambiar varias cosas dentro del código, pero quedó mucho mejor y entendible para todos. Recibo sus comentarios y espero que ayude a quién lo pueda necesitar.

// index.tsx

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

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

const composedEnhancers = compose(
  applyMiddleware(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>
);

// 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, getPokemonDetails } from "./api";
import { setPokemonsDetails } from "./actions";
import { IPokemonDetails } from "./types";

import logo from "./statics/logo.svg";
import "./App.css";

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

function App() {
  const pokemons = useSelector((state: AppType) => state.pokemons);
  const dispatch = useDispatch();

  useEffect(() => {
    const fetchPokemons = async () => {
      const response = await getPokemon();

      if (response) {
        const pokemonsDetails = await Promise.all(
          response.map((pokemon) => getPokemonDetails(pokemon))
        );
        dispatch(setPokemonsDetails(pokemonsDetails));
      }
    };
    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;

// types/index.ts

export interface IPokemonDetails {
  abilities:                [];
  // base_experience:          number;
  // forms:                    [];
  // game_indices:             [];
  // height:                   number;
  // held_items:               any[];
  // id:                       number;
  // is_default:               boolean;
  // location_area_encounters: string;
  // moves:                    [];
  name: string;
  // order:                    number;
  // past_types:               any[];
  // species:                  [];
  sprites: SpritesType;
  // stats:                    [];
  // types:                    [];
  // weight:                   number;
}

export interface IPokemonType {
  name: string;
  url: string;
}

export type InitialPokemonsStateType = {
  pokemons: IPokemonType[];
};

export type SpritesType = {
  back_default: string;
  back_female: string | null;
  back_shiny: string;
  back_shiny_female: string | null;
  front_default: string;
  front_female: string | null;
  front_shiny: string;
  front_shiny_female: string | null;
};

// api/responses/index.ts

import { IPokemonType } from "../../types";

export type PokemonResponseType = {
  results: IPokemonType[];
};



// api/index.ts

import axios from "axios";
import { IPokemonDetails } 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: any) => {
  try {
    const { data } = await axios.get<IPokemonDetails>(pokemon.url);
    return data;
  } catch (err) {
    console.error("err ".repeat(5), err);
  }
};

// reducers/pokemons.ts

import { SET_POKEMONS_DETAILS } from "../actions/types";
import { InitialPokemonsStateType } from "../types";

const initialState: InitialPokemonsStateType = {
  pokemons: [],
};

export const pokemonsReducer = (
  state: InitialPokemonsStateType = initialState,
  action: any
) => {
  switch (action.type) {
    case SET_POKEMONS_DETAILS:
      return {
        ...state,
        pokemons: action.payload,
      };

    default:
      return state;
  }
};

// components/PokemonList

import React from "react";
import { IPokemonDetails } from "../types";
import PokemonCard from "./PokemonCard";
import "./PokemonList.css";

type PokemonListProps = {
  pokemons: (IPokemonDetails | undefined)[];
};

const PokemonList = (props: PokemonListProps) => {
  return (
    <div className="PokemonList">
      {props.pokemons.map(
        (pokemon) =>
          pokemon && <PokemonCard key={pokemon.name} pokemon={pokemon} />
      )}
    </div>
  );
};

export default PokemonList;



// components/pokemonCard.tsx

import React from "react";
import { Card } from "antd";
import Meta from "antd/lib/card/Meta";
import { StarOutlined } from "@ant-design/icons";
import { IPokemonDetails } from "../types";

type PokemonCardProps = {
  pokemon: IPokemonDetails;
};

const PokemonCard = (props: PokemonCardProps) => {
  return (
    <Card
      style={{ width: 250 }}
      title={props.pokemon.name}
      cover={<img src={props.pokemon.sprites.front_default} alt={props.pokemon.name} />}
      extra={<StarOutlined />}
    >
      <Meta description="fire, magic" />
    </Card>
  );
};

export default PokemonCard;

Comentarios (43)43 comentarios

Franco Figueroa Flores

Gabriel Esquivel

Rafael Soriano Ramírez

Hansell Kopp

Henry J. Perez

enderson omaña

Geovanni Labastida Vázquez

Hace 3 años

Juan Camilo Lentino Villalba

Andres Prieto

Stevenson Grajales

Max Andy Diaz Neyra

Zaidibeth Ramos

Fabian Siatama

José de Jesús Valera Durán

Hace 3 meses

David Rangel

Hace 6 meses

Gustavo Quispe Ramos

Hace 8 meses

Juan Diego Mejia Maestre

Hace 9 meses

Harold Zurita Simon

Hace un año•editado

CRISTIAN ANDRES ALVAREZ YAYA

Hace un año

Sebastian Carballo

Nazareno Rosales

Hace 2 años

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

Sprites reales con Promise.all en PokeAPI