Qué es la app Pokedux con Redux

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:002:06

Qué es la app Pokedux con Redux

Curso Profesional de React.js y Redux

Clase 5 de 22

Clase 5 / 22

Recursos

Vas a construir una Pokedux, una aplicación que lista a los primeros 151 pokémones de la primera generación, mientras aprendes a integrar Redux en un proyecto real. Es ideal si quieres pasar de la teoría al código y entender cómo funciona el manejo de estado global en aplicaciones modernas.

La propuesta es directa: maquetar una vista, conectar Redux, depurar con herramientas reales y terminar usando la alternativa más moderna del ecosistema. Todo con un proyecto que se siente familiar y divertido.

¿Qué vas a construir en el proyecto Pokedux con Redux?

El objetivo es tener una interfaz funcional donde puedas listar pokémones, marcar tus favoritos y filtrar resultados desde un buscador. Cada pokémon muestra su nombre y su tipo, y el estado global guarda cuáles seleccionaste como favoritos.

Estos son los entregables que tendrás al final:

Una vista maquetada con la lista de los 151 pokémones originales.
Un estado global que registra tus pokémones favoritos.
Un buscador funcional que filtra por nombre o por tipo.

¿Qué es una Pokedux? Es un proyecto educativo que combina la idea de una Pokédex con Redux. Te sirve para practicar manejo de estado global con un dataset conocido y atractivo.

¿Qué conceptos de Redux vas a aprender en la práctica?

La ruta cubre desde lo básico hasta herramientas avanzadas del ecosistema. No te quedas solo en actions y reducers: también vas a depurar, combinar lógica y simplificar todo con la versión moderna.

Esto es lo que vas a integrar paso a paso:

Redux conectado al proyecto desde cero.
Redux DevTools, la herramienta de desarrollo para inspeccionar el estado.
Middlewares custom y middlewares con redux-thunk para manejar lógica asíncrona.
Reducers combinados para organizar el estado por dominios.
Redux Toolkit, la alternativa moderna que reduce el código repetitivo.

¿Para qué sirve redux-thunk? Es un middleware que te permite escribir actions asíncronas, como llamadas a una API, antes de actualizar el estado global.

¿Qué herramientas externas vas a usar?

Dos piezas clave acompañan el desarrollo y se conectan en la siguiente clase del setup [1:18]:

PokeAPI, la API pública desde la que obtendrás los datos de los 151 pokémones.
Ant Design, una suite de UI que acelera el diseño de la interfaz.

¿Por qué practicar Redux con un proyecto como este?

Aprender Redux con ejemplos abstractos suele dejar dudas. Aquí trabajas con un caso concreto: una lista, un estado de favoritos y un filtro. Tres patrones que aparecen en casi cualquier app real, desde un carrito de compras hasta un panel de administración.

Y aquí viene lo interesante: al final compararás el enfoque clásico con Redux Toolkit, así entiendes por qué la comunidad migró hacia esa alternativa y cuándo conviene usarla.

¿Listo para convertirte en entrenador experto en Redux? Cuéntame en los comentarios qué pokémon vas a marcar primero como favorito.

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

Qué es la app Pokedux con Redux