useSelector y useDispatch vs connect en Redux

Cursos Empresas Blog Live Conf Precios

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

useSelector y useDispatch vs connect en Redux

Resumen

Si ya conectaste un componente con connect, el siguiente paso natural es migrar al API de hooks de React Redux. Esta guía te muestra cómo reemplazar mapStateToProps y mapDispatchToProps por useSelector y useDispatch, por qué Redux recomienda esta forma y qué pierdes en el camino.

¿Qué diferencia hay entre connect y los hooks de Redux?

La diferencia más visible es la cantidad de boilerplate. Con connect tuviste que crear mapStateToProps, mapDispatchToProps y envolver el componente en un wrapper. Con hooks haces lo mismo en dos líneas.

Pero hay un trade-off que conviene tener claro antes de migrar:

Separación de responsabilidades: connect gana, porque crea un higher-order component que renderiza tu componente y le pasa estado y actions por props.
Testing: con connect es más simple, ya que solo necesitas enviar props simuladas. Con hooks debes conectar el componente a Redux antes de poder testearlo.
Experiencia de desarrollo: los hooks ganan por menos código, ciclo de vida de la data más claro y mejor compatibilidad con TypeScript.

¿Por qué Redux recomienda usar hooks en lugar de connect? Porque ofrecen menos boilerplate, un flujo de datos más fácil de entender y mejor integración con TypeScript. La contrapartida es que el testing requiere conectar el componente al store.

¿Para qué sirven useSelector y useDispatch?

Son los dos hooks principales del API y cubren lo que antes hacías con connect.

Cómo funciona useSelector

useSelector extrae datos del estado a través de una función selectora. Esa función debe ser pura, es decir, no depender de variables externas. Es el equivalente directo de mapStateToProps, con una diferencia clave: el valor se guarda en una variable, no llega por props.

El selector también suscribe el componente al estado. Cada vez que se hace dispatch de una acción, Redux lo ejecuta para evaluar si el valor cambió y decidir si rerenderiza o no el componente.

Cómo funciona useDispatch

useDispatch retorna una referencia al dispatcher del store de Redux. Con esa referencia disparas tus acciones directamente, sin pasar por props ni necesitar mapDispatchToProps.

¿Qué reemplaza useSelector y useDispatch del enfoque con connect? useSelector reemplaza a mapStateToProps y useDispatch reemplaza a mapDispatchToProps, eliminando el wrapper del componente.

¿Cómo migrar un componente de connect a hooks paso a paso?

La migración es bastante directa si sigues el orden correcto. Estos son los cambios que aplicas sobre el componente que ya tenías conectado.

Eliminar los parámetros que recibías por props desde connect.
Borrar mapStateToProps, mapDispatchToProps y el wrapper del export.
Limpiar imports que ya no usas y dejar la acción con su nombre original, sin renombrar.
Importar useSelector y useDispatch desde react-redux.
Obtener los datos del estado con el selector y guardar la referencia del dispatcher.
Disparar las acciones llamando al dispatcher con la acción como argumento.

En código, el resultado se ve así:

javascript import { useSelector, useDispatch } from 'react-redux'; import { setPokemons } from './actions';

const pokemons = useSelector(state => state.pokemons); const dispatch = useDispatch();

dispatch(setPokemons(data));

Al recargar el navegador, la lista de pokemons sigue apareciendo igual que antes. Lo que antes te tomaba varios bloques de código ahora vive en dos líneas.

Conceptos y habilidades que trabajamos en la clase

Algunos términos que aparecen en la migración valen una explicación corta para que los uses con seguridad.

Boilerplate: código repetitivo que necesitas escribir para que algo funcione, aunque no aporta lógica de negocio. Se menciona al inicio de la clase como la principal carga de connect.
Higher-order component: componente que envuelve a otro y le inyecta props. Es lo que connect crea por debajo.
Función pura: función que, con los mismos argumentos, siempre retorna el mismo valor y no depende de variables externas. Es un requisito del selector que pasas a useSelector.
Suscripción al estado: mecanismo por el que el selector se vuelve a ejecutar tras cada dispatch para decidir si rerenderiza el componente.
Dispatcher: función que dispara acciones contra el store. useDispatch te da una referencia a ella.

Si ya tienes un proyecto con connect, intenta migrar un componente siguiendo estos pasos y cuéntame en los comentarios qué parte te resultó más confusa o qué descubriste al comparar ambos enfoques.

Comentarios

Estiven Mahecha Henao

Estudiante

Muchísimo mejor con hooks..

Rafael Soriano Ramírez

Estudiante

Más fácil, los temas vienen en las pruebas unitarias, unas por otras

Seba Cardoso

Estudiante

Soy un viejo usuario de Redux. Hoy en dia uso solo los hooks. Me gusta mucho mas y para testear no se me complico tanto. Simplemente mockeo al estado actual y listo.

Marc España Quinquilla

Estudiante

Gracias por el aporte Seba, Por la tendencia de los años, crees que Redux terminará integrado en React? Osea poder manejar el estado global sin descargar una librería extra.

Seba Cardoso

Estudiante

Yo no creo que React integre Redux porque un principio basico de React es el de "abstracciones comunes": se refiere que a React no quiere incluir código inútil en su core, código que sea demasiado especifico para caso de uso demasiado concreto.

Tambien te puedo decir que podrias manejar un estado global solo con el Context Api que viene integrado dentor de React o usar otras librerias alternativas a Redux como Mobx

Henry J. Perez

Estudiante

Redux en lo salvaje

Aparte del titulo de periodico que coloque, mi experiencia con Redux es que muchos proyectos utilizan el connect API para sus componentes.
Esto no solo se debe a que muchas veces se trata de proyectos comenzados antes de la existencia de los Hooks, sino tambien a una question de consistencia. Tanto a nivel de testing como menciono la profesora, como a nivel de desarrollo del codigo en general.
Personalmente veo mucho mas facil e intuitivo utilizar Hooks y componentes funcionales. Pero es bueno que conozcas las maneras "legacy" porque te lo vas a encontrar mucho en el ambito laboral.

Miguel Angel Reyes Moreno

Estudiante

Hooks vs. Connect

useSelector vs Connect

Boilerplate -> Los hooks ahorran mucho código aquí.
Separación de responsabilidades -> Connect hace un High Order Component, así que es mejor.
Testing -> Es un poco más fácil con Connect.

Redux ahora recomienda usar su Hooks API. - Redux Docs

Use the React-Redux Hooks API

useSelector -> const list = useSelector(state => state.list);
useDispatch -> const dispatch = useDispatch(); dispatch(myAction());

Juan Pablo Jimenez

Estudiante

9.-Hooks vs. Connect

-- useSelector vs Connect

Boilerplate: Nos ahorramos codigo usando hooks.
Separación de responsabilidades: Connect el metodo crea un componente de orden mayor que es quien renderiza el componente y le pasa el estado y action a través de los props.
Testing: Es más fácil hacer testing con connect ya que recibe el estado por los props y solo se envían props, en cambio con los hooks tendremos que conectar el componente a redux antes de testear.

-- Redux recomienda usar su Hooks API.

-- Hooks API

useSelector: nos permite extraer la data del estado a traves de una funcion selectora (que debe ser pura), es equivalente al mapstatetoprops, solo que el valor se guarda en una variable. El selector sera llamado cada que se haga distpatch de una acción para evaluar si se renderiza de nuevo un componente.
useDispatch: nos retorna una referencia del dispatcher del store de redux el cual usamos para disparar acciones.

Max Andy Diaz Neyra

Estudiante

Dejo mi avance en TS:

// App.tsx
import { useEffect, useState } from 'react'
import { connect, useDispatch, useSelector } from 'react-redux'
import { Col } from 'antd'
import { Search } from './components/Search'
import { PokemonList } from './components/PokemonList'
import { getPokemons, PokemonType } from './api'
import logo from './statics/logo.svg'
import './App.css'
import { setPokemons } from './actions'
import { TypeState } from './reducers/pokemon'

function App() {
  const pokemons = useSelector((state:TypeState)=>state.pokemons)
  const dispath = useDispatch();
  useEffect(()=>{
    async function fetchPokemon(){
        const pkmns = await getPokemons();
        dispath(setPokemons(pkmns as PokemonType[]))
    } 
    fetchPokemon();
  },[])
  return (
    <div className="App">
      <Col span={4} offset={10}>
        <img src={logo} alt="Pokedux" />
      </Col>
      <Col span={8} offset={8}>
        <Search />
      </Col>
      <PokemonList pokemons={pokemons} />
    </div>
  )
}


export default App;

// pokemon.ts
import { SET_POKEMONS } from "../actions/types"
import { PokemonType } from "../api"

export type TypeState = {
    pokemons: PokemonType[]
}

const initialState: TypeState = {
    pokemons: []
}

export const pokemonReducer = (state:TypeState = initialState, action:any)=>{
    switch(action.type){
        case SET_POKEMONS:
            return {...state, pokemons: action.payload}

        default:
            return state
    }

}

David Condori Quispe

Estudiante

Andrés Felipe Eslava Zuluaga

Estudiante

Comencé el proyecto con TypeScript y acá tiro el resumen:

// ** index.tsx

// Acá de crea el store. 
// Por medio del provider de redux se pasa el reducer, que contiene el state

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 { legacy_createStore as createStore } from 'redux'
import './index.css';

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

const store = createStore(pokemonsReducer);

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

//** reducers/pokemons.ts

// Acá se inicializa el state.
// Creamos la función reducer: función que recibe *el state* y *el action*.
// El action contiene: el type del action y el payload.
// Se evalúa el type del action, para devolver el state correcto con lo que contine el payload.

import { PokemonType } from "../api";
import { SET_POKEMONS } from "../actions/types";

type InitialPokemonsStateType = {
  pokemons: PokemonType[]
};

const initialState: InitialPokemonsStateType = {
  pokemons: []
}

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

    default: return state;
  }
};

// ** actions/index.ts

// El action es una función que recibe un payload.
// Devuelve un objeto con el type y el payload que recibe.

import { PokemonType } from "../api";
import { SET_POKEMONS } from "./types";

export const setPokemons = (payload: PokemonType) => ({
  type: SET_POKEMONS,
  payload,
});}

// actions/type.ts  
export const SET_POKEMONS = 'SET_POKEMONS';

// ** api/index.ts

// Acá se crea el llamado a la API y los tipados globales.

import axios from "axios"

export type PokemonType = {
  name: string;
  url: string;
};

export type PokemonResponse = {
  results: PokemonType[];
}

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

export default getPokemon;

//** App.tsx

// Acá suscribimos el componente al state con useSelector
// También se dispara la acción con useDispatch para que llame los pokemons y se ejecute el reducer
// El reducer actualiza el estado global de la aplicación

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, { PokemonType } from './api';
import { setPokemons } from './actions'

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

type AppType = {
  pokemons: PokemonType[],
  setPokemons: any,
}

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

  useEffect(() => {
    const fetchPokemons = async () => {
      const response = await getPokemon();
      dispatch(setPokemons(response));
    }
    fetchPokemons();
  }, []);
  console.log('pokemons ', pokemons)

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

export default App;

Gualberto Montiel

Estudiante

Ventajas de "Hook": Permite una escritura más limpia y sencilla de los componentes de React. Facilita la reutilización de código y la composición de funcionalidades. Mejora la legibilidad del código al separar la lógica de los componentes de React. Ventajas de "Connect":

Ofrece una forma centralizada y eficiente de gestionar el estado global de la aplicación. Facilita la implementación de patrones de diseño como la arquitectura Flux. Mejora la escalabilidad de la aplicación al mantener una única fuente de verdad para el estado.

Diego Fernando Velesaca Orellana

Estudiante

Soy nuevo en React y en realidad me queda la duda de que se debería considerar para decidir si usar Redux o los Hooks ? Desde mi punto de vista veo que es mucho más fácil y amigables usar los Hooks.

Cesar Pelaez

Estudiante

Te refieres a que consideracion tener en cuenta para determinar si usar los hooks de react o a los hooks de redux?

Max Andy Diaz Neyra

Estudiante

Respuesta contundente: utiliza los hooks. Resulta que hacen lo mismo pero los hooks mejoran la experiencia de desarrollo. Ambos son correctos, Redux con connect se hizo con la filosifia antigua y ahora Redux con hooks se hace con la filosifia actual. En React prioriza funciones sobre clases, al final son lo mismo pero al desarrollar las funciones son mejores.

Matias Peressutti

Estudiante

No logro entender cómo es que se termina conectando con el reducer, ya que no es mencionado/invocado en ninguna línea dentro de App.js. Me confunde mucho.

Samuel Santana

Estudiante

Por si te ayuda, yo me tuve que hacer un esquema para entenderlo mejor. Si algún compañero/a detecta algún fallo, le agradecería que lo comentará, ya que me ayudará a mi también a entenderlo mejor.

Cayo Legal

Estudiante

X2, me gustaría una explicación sobre eso

Diego Vergara

Estudiante

Amo los hooks, además sigue la misma forma de trabajar el traspaso de información con react que en los cursos anteriores.

Edgar Rolando Cosajay Campos

Estudiante

si se ejecuta dispactch de la accion se renderiza de nuevo el selector

David Rangel

Estudiante

Así se vería con TS:

  const pokemons = useSelector(
    (state: RootState) => state.pokemonData.pokemons,
  );
  const dispatch = useDispatch();

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

      if (pokeRes) {
        dispatch(setPokemons(pokeRes));
      }
    };

    fetchPokemons();
  }, [getPokemon, setPokemons]);

Juan Diego Mejia Maestre

Estudiante

⚛️ Redux Hooks: Guía Rápida de Implementación

Pasar de connect (HOC) a Hooks es el estándar moderno en React. Reduce el "boilerplate" (código repetitivo) y mejora la legibilidad de forma increíble.

🚀 ¿Por qué usar Hooks en lugar de connect?

✅ Menos Código: Adiós a mapStateToProps y mapDispatchToProps.
✅ Legibilidad: El estado se consume directamente donde se necesita.
✅ TypeScript Friendly: Es mucho más fácil tipar hooks que componentes de orden superior.
✅ Recomendación Oficial: Redux prefiere esta API por su simplicidad.

🛠️ Los Hooks Esenciales

useSelector:
- Función: Extrae datos del Store de Redux.
- Dato Clave: Suscribe el componente al Store. Si el valor seleccionado cambia, el componente se vuelve a renderizar.
- Tip: Se recomienda usar selectores específicos para evitar renders innecesarios.
useDispatch:
- Función: Devuelve la función dispatch para enviar acciones al Store.
- Dato Clave: La referencia de la función es estable y no cambia entre renders.

🔄 Proceso de Migración (Refactoring)

Limpiar: Elimina el envoltorio connect(...) al exportar.
Importar: Trae { useSelector, useDispatch } de react-redux.
Sustituir: Cambia las props que recibía el componente por constantes que usen los hooks.

💻 Ejemplo Práctico (Sintaxis Moderna)

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setPokemon } from './actions';

const PokemonComponent = () => {
  // 1. Obtenemos el estado directamente
  const pokemonList = useSelector(state => state.pokemonList);

  // 2. Obtenemos el disparador de acciones
  const dispatch = useDispatch();

  const handleSetPokemon = () => {
    dispatch(setPokemon());
  };

  return (
    <div>
      {pokemonList.map(p => <p key={p.id}>{p.name}</p>)}
      <button onClick={handleSetPokemon}>✨ Cargar Pokémon</button>
    </div>
  );
};

export default PokemonComponent;

Harold Zurita Simon

Estudiante

🧠 Redux con Hooks

Redux también nos proporciona una API basada en hooks que podemos utilizar dentro de nuestros componentes funcionales.

Las principales diferencias con el patrón clásico (connect) son:

Boilerplate
Separación de responsabilidades
Testing

⚙️ Boilerplate

Con el patrón tradicional de Redux, debíamos crear dos elementos —mapStateToProps y mapDispatchToProps— y luego envolver nuestro componente con el método connect.

Toda esa configuración generaba mucho boilerplate, es decir, código repetitivo y poco legible.

Con los hooks (useSelector y useDispatch), obtenemos el mismo resultado con solo un par de líneas, haciendo el código más simple y directo.

🧩 Separación de responsabilidades

Cuando usamos connect, este método crea un High Order Component (HOC).

El HOC es el encargado de renderizar nuestro componente y de inyectarle el estado y las acciones (actions) como props.

Con los hooks, esa conexión se hace directamente dentro del componente, sin HOCs intermedios.

Esto permite una mejor separación de responsabilidades y una arquitectura más moderna basada en funciones.

🧪 Testing

Hacer testing puede resultar un poco más sencillo con connect, ya que el componente recibe el estado y los dispatchers como props, por lo que basta con pasarle props simuladas.

En cambio, con los hooks, el componente necesita estar realmente conectado al store de Redux durante las pruebas.

Esto requiere envolverlo con un Provider en el entorno de testing, aunque no es un gran inconveniente.

💡 Recomendación oficial

Redux recomienda utilizar su API de hooks porque:

Proporciona una mejor experiencia de desarrollo.
Reduce el boilerplate.
Facilita entender el flujo de datos en la aplicación.
Tiene una mejor integración con TypeScript y con los patrones modernos de React.

🧰 Hooks principales de Redux

La API de hooks tiene dos funciones principales:

🔸 useSelector

Nos permite extraer datos del estado global mediante una función selectora.

Esta función debe ser pura, es decir, no depender de variables externas.

Su funcionamiento es similar a mapStateToProps, pero con la diferencia de que:

El valor se obtiene directamente dentro del componente (no por props).
El hook suscribe el componente al store, por lo que se ejecuta cada vez que se hace dispatch de una acción, verificando si el valor cambió para decidir si debe volver a renderizarse.

🔸 useDispatch

Nos devuelve una referencia al dispatcher del store, que utilizamos para disparar acciones (actions) de Redux.

Equivale a mapDispatchToProps, pero en una forma mucho más simple.

🪄 Implementación mediante un Custom Hook

Podemos encapsular la lógica de Redux dentro de un custom hook, por ejemplo usePokemons.js:

import { useDispatch, useSelector } from 'react-redux';
import { setPokemons } from '../actions';

export const usePokemons = () => {
  const pokemons = useSelector((state) => state.pokemons);
  const dispatch = useDispatch();

  const handleSetPokemons = (pokemonsData) => {
    dispatch(setPokemons(pokemonsData));
  };

  return {
    pokemons,
    setPokemons: handleSetPokemons,
  };
};

Luego podemos eliminar el patrón tradicional con connect y usar nuestro custom hook directamente:

import { Col } from "antd";
import Searcher from "./components/Searcher";
import PokemonList from "./components/PokemonList";
import logo from "./statics/logo.svg";
import "./App.css";
import { getPokemon } from "./api";
import { useEffect } from "react";
import { usePokemons } from "./hooks/usePokemons";

function App() {
  const { pokemons, setPokemons } = usePokemons();

  useEffect(() => {
    const fetchPokemons = async () => {
      const pokemonsRes = await getPokemon();
      setPokemons(pokemonsRes);
    };

    fetchPokemons();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  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;

Jhoana España Urresty

Estudiante

tengo este error

Uncaught TypeError: pokemons.map is not a function

import './pokemonList.css'
import FuckCard from './FuckCard'

const FuckList = ({ pokemons }) => {
	console.log(pokemons);
	return (
		<div className='PokemonList'>
			{pokemons.map((pokemon) => {
				return <FuckCard name={pokemon.name} key={pokemon.name} img={pokemon.url} />
			})}
		</div>
	)
}
FuckList.defaultProps = {
	pokemons: Array(10).fill(''),
};

export default FuckList

Mariangelica Useche

Team Platzi

Tienes un default prop, sin embargo parece que estás mandado null u otra cosa a tu componente. ¿Qué te pinta ese console.log?

Gregori Piñeres

Estudiante

¿Podemos usar alternativas como @preact/signals como una state manager global de nuestra aplicación?

Cristian Contreras

Estudiante

useSelector es un hook que permite extraer datos del estado de Redux, utilizando una función selectora. Este hook se suscribe automáticamente a los cambios en el estado y se vuelve a renderizar el componente cuando el dato seleccionado cambia.

Por otro lado, useDispatch retorna una referencia a la función dispatch de Redux, que se utiliza para enviar acciones al store. Ambos hooks simplifican el código y mejoran la experiencia de desarrollo al eliminar la necesidad de crear componentes de orden superior como connect.

DANIEL STEVEN RODRIGUEZ VERANO

Estudiante

useSelector const list = useSelector(state => state.list)
- nos permite extraer la data del estado atraves de una funcion selectora (las funcion es pura), es equivalente al mapstatetoprops, solo que el valor se guarda en una variable. el selector será llamado cada que se haga distpatch de una accion para evaluar si se renderiza de nuevo un componente
- 💡 useSelector es semejante a state de const [state, setState] = useState() osea que podemos sacar datos de hay solo que tenemos que especificar de donde los queremos sacar o de que parte del reducer lo queremos sacar el state o los datos. la maquina osea useSelector entiende automaticamente de donde va a sacar el state del reducer tan solo tenemos que especificarlo como const pokemons = useSelector((state) => state.pokemons) que le estamos sacando los datos de la API
------------------------------------------
useDispatch const dispatch = useDispatch() dispatch(myAction())
- nos retorna una referencia del distpatch del Store de Redux el cual usamos para disparar acciones
- 💡 const dispatch = useDispatch() dispatch(myAction()) es semejante al setState de const [state, setState] = useState() osa que podemos enviar cualquier datos al action de los objetos dispatch(setLoading(true)) que anteriormente hicimos y cuando el objeto retorne sus valores como el type y el payload le lo estaremos enviando al store de Redux y el store selo enviara al action y este lo actualizara los state indicados, que posteriormente los llamaremos con useSelector

// App.tsx
import { useEffect, useState } from 'react'
import { connect, useDispatch, useSelector } from 'react-redux'
import { Col } from 'antd'
import { Search } from './components/Search'
import { PokemonList } from './components/PokemonList'
import { getPokemons, PokemonType } from './api'
import logo from './statics/logo.svg'
import './App.css'
import { setPokemons } from './actions'
import { TypeState } from './reducers/pokemon'

function App() {
  const pokemons = useSelector((state:TypeState)=>state.pokemons)
  const dispath = useDispatch();
  useEffect(()=>{
    async function fetchPokemon(){
        const pkmns = await getPokemons();
        dispath(setPokemons(pkmns as PokemonType[]))
    } 
    fetchPokemon();
  },[])
  return (
    <div className="App">
      <Col span={4} offset={10}>
        <img src={logo} alt="Pokedux" />
      </Col>
      <Col span={8} offset={8}>
        <Search />
      </Col>
      <PokemonList pokemons={pokemons} />
    </div>
  )
}


export default App;

// pokemon.ts
import { SET_POKEMONS } from "../actions/types"
import { PokemonType } from "../api"

export type TypeState = {
    pokemons: PokemonType[]
}

const initialState: TypeState = {
    pokemons: []
}

export const pokemonReducer = (state:TypeState = initialState, action:any)=>{
    switch(action.type){
        case SET_POKEMONS:
            return {...state, pokemons: action.payload}

        default:
            return state
    }

}

// ** index.tsx

// Acá de crea el store. 
// Por medio del provider de redux se pasa el reducer, que contiene el state

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 { legacy_createStore as createStore } from 'redux'
import './index.css';

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

const store = createStore(pokemonsReducer);

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

//** reducers/pokemons.ts

// Acá se inicializa el state.
// Creamos la función reducer: función que recibe *el state* y *el action*.
// El action contiene: el type del action y el payload.
// Se evalúa el type del action, para devolver el state correcto con lo que contine el payload.

import { PokemonType } from "../api";
import { SET_POKEMONS } from "../actions/types";

type InitialPokemonsStateType = {
  pokemons: PokemonType[]
};

const initialState: InitialPokemonsStateType = {
  pokemons: []
}

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

    default: return state;
  }
};

// ** actions/index.ts

// El action es una función que recibe un payload.
// Devuelve un objeto con el type y el payload que recibe.

import { PokemonType } from "../api";
import { SET_POKEMONS } from "./types";

export const setPokemons = (payload: PokemonType) => ({
  type: SET_POKEMONS,
  payload,
});}

// ** api/index.ts

// Acá se crea el llamado a la API y los tipados globales.

import axios from "axios"

export type PokemonType = {
  name: string;
  url: string;
};

export type PokemonResponse = {
  results: PokemonType[];
}

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

export default getPokemon;

//** App.tsx

// Acá suscribimos el componente al state con useSelector
// También se dispara la acción con useDispatch para que llame los pokemons y se ejecute el reducer
// El reducer actualiza el estado global de la aplicación

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, { PokemonType } from './api';
import { setPokemons } from './actions'

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

type AppType = {
  pokemons: PokemonType[],
  setPokemons: any,
}

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

  useEffect(() => {
    const fetchPokemons = async () => {
      const response = await getPokemon();
      dispatch(setPokemons(response));
    }
    fetchPokemons();
  }, []);
  console.log('pokemons ', pokemons)

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

export default App;

  const pokemons = useSelector(
    (state: RootState) => state.pokemonData.pokemons,
  );
  const dispatch = useDispatch();

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

      if (pokeRes) {
        dispatch(setPokemons(pokeRes));
      }
    };

    fetchPokemons();
  }, [getPokemon, setPokemons]);

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setPokemon } from './actions';

const PokemonComponent = () => {
  // 1. Obtenemos el estado directamente
  const pokemonList = useSelector(state => state.pokemonList);

  // 2. Obtenemos el disparador de acciones
  const dispatch = useDispatch();

  const handleSetPokemon = () => {
    dispatch(setPokemon());
  };

  return (
    <div>
      {pokemonList.map(p => <p key={p.id}>{p.name}</p>)}
      <button onClick={handleSetPokemon}>✨ Cargar Pokémon</button>
    </div>
  );
};

export default PokemonComponent;

import { useDispatch, useSelector } from 'react-redux';
import { setPokemons } from '../actions';

export const usePokemons = () => {
  const pokemons = useSelector((state) => state.pokemons);
  const dispatch = useDispatch();

  const handleSetPokemons = (pokemonsData) => {
    dispatch(setPokemons(pokemonsData));
  };

  return {
    pokemons,
    setPokemons: handleSetPokemons,
  };
};

import { Col } from "antd";
import Searcher from "./components/Searcher";
import PokemonList from "./components/PokemonList";
import logo from "./statics/logo.svg";
import "./App.css";
import { getPokemon } from "./api";
import { useEffect } from "react";
import { usePokemons } from "./hooks/usePokemons";

function App() {
  const { pokemons, setPokemons } = usePokemons();

  useEffect(() => {
    const fetchPokemons = async () => {
      const pokemonsRes = await getPokemon();
      setPokemons(pokemonsRes);
    };

    fetchPokemons();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  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;

import './pokemonList.css'
import FuckCard from './FuckCard'

const FuckList = ({ pokemons }) => {
	console.log(pokemons);
	return (
		<div className='PokemonList'>
			{pokemons.map((pokemon) => {
				return <FuckCard name={pokemon.name} key={pokemon.name} img={pokemon.url} />
			})}
		</div>
	)
}
FuckList.defaultProps = {
	pokemons: Array(10).fill(''),
};

export default FuckList

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