Cómo guardar Pokémon favoritos 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:0017:02

Cómo guardar Pokémon favoritos con Redux

Curso Profesional de React.js y Redux

Clase 16 de 22

Clase 16 / 22

Recursos

Marcar Pokémon como favoritos en una app con Redux implica conectar tres piezas: un botón visual con Ant Design, un action creator que dispare el cambio y un reducer que actualice el estado de forma controlada. Aquí verás cómo encajan, paso a paso, usando un proyecto real de tarjetas de Pokémon.

Cómo mostrar los tipos de cada Pokémon dentro de la tarjeta

Antes de tocar el botón de favoritos, conviene saldar una deuda: los tipos estaban hardcodeados en el componente PokemonCard. La estructura real en Redux guarda los tipos como un arreglo, donde cada elemento tiene una propiedad type con un name adentro [01:00].

La solución es pasar pokemon.types desde PokemonList como prop y construir un string legible:

js const types = pokemon.types .map((element) => element.type.name) .join(', ');

El método map recorre el arreglo y extrae cada nombre. Después, join(', ') une esos nombres con coma y espacio, devolviendo un texto como grass, poison para Bulbasaur o fire para Charmeleon. Ese string se pasa como descripción al componente Card.Meta y los tipos se vuelven dinámicos al instante.

¿Para qué sirve el método join en JavaScript? Convierte un arreglo en un string uniendo cada elemento con el separador que le indiques. Si pasas ', ', obtienes elementos separados por coma y espacio.

Cómo crear un botón de favoritos con Ant Design

El componente Card de Ant Design expone una prop llamada extra, pensada para renderizar contenido en la esquina superior derecha de la tarjeta. Ese es el lugar perfecto para el botón de estrella [03:30].

La idea es construir un componente reutilizable, StarButton, que reciba dos props:

isFavorite: indica si ese Pokémon ya está marcado.
onClick: la función que se ejecuta al hacer clic.

Dentro del botón se elige el ícono según el estado:

js const icon = isFavorite ? <StarFilled /> : <StarOutlined />; return <Button icon={icon} onClick={onClick} />;

StarOutlined se usa cuando el Pokémon no es favorito y StarFilled cuando ya lo es, logrando ese efecto visual de estrella vacía contra estrella llena. Un detalle clave: no hay que invocar el componente dos veces (una al asignar la variable y otra al renderizar), porque eso rompe el árbol de React y llena la consola de errores.

¿Cómo conectar el botón con la tarjeta del Pokémon?

De vuelta en PokemonCard, el StarButton se pasa al prop extra del Card. Para validar que todo funciona antes de tocar Redux, basta con poner isFavorite={true} y un onClick con alert('clickeado'). Si la estrella se ve llena y la alerta dispara, la UI está lista para conectarse al estado global.

Cómo guardar el estado favorito en el reducer de Redux

Ahora viene la parte interesante: que el clic se traduzca en un cambio real del estado. Esto requiere tres piezas coordinadas, type, action creator y reducer, más un dispatch desde el componente [07:30].

Primero, el type:

js export const SET_FAVORITE = 'SET_FAVORITE';

Luego, el action creator que recibe un payload con el pokemonId:

js export const setFavorite = (payload) => ({ type: SET_FAVORITE, payload, });

En el reducer, el caso SET_FAVORITE hace cuatro cosas en orden:

Crea una copia del arreglo de Pokémon con [...state.pokemons].
Busca el índice del Pokémon usando findIndex y comparando pokemon.id === action.payload.pokemonId.
Si el índice es menor a cero, retorna el estado sin cambios.
Si existe, alterna la propiedad favorite con su negación, generando un toggle.

js case SET_FAVORITE: { const newPokemonList = [...state.pokemons]; const currentPokemonIndex = newPokemonList.findIndex( (pokemon) => pokemon.id === action.payload.pokemonId ); if (currentPokemonIndex < 0) return state; newPokemonList[currentPokemonIndex] = { ...newPokemonList[currentPokemonIndex], favorite: !newPokemonList[currentPokemonIndex].favorite, }; return { ...state, pokemons: newPokemonList }; }

¿Qué hace findIndex en un arreglo? Recorre los elementos y devuelve la posición del primero que cumple la condición. Si ninguno cumple, devuelve -1.

¿Por qué hay que copiar el arreglo antes de modificarlo?

Porque Redux exige inmutabilidad: nunca debes mutar el estado original. Crear una copia con el operador spread y modificar esa copia garantiza que React detecte el cambio y vuelva a renderizar. Este principio se profundiza en el siguiente módulo, pero por ahora alcanza con confiar en el patrón.

Cómo disparar la acción setFavorite desde el componente

El último paso es despachar la acción cuando el usuario haga clic. En PokemonCard se usa el hook useDispatch de react-redux y se crea una función handleOnFavorite:

js const dispatch = useDispatch(); const handleOnFavorite = () => { dispatch(setFavorite({ pokemonId: id })); };

Hay un detalle que suele tropezar: el payload debe enviarse como objeto con la propiedad pokemonId, no como valor suelto [12:30]. Si mandas solo el id, el reducer no encontrará la propiedad esperada y el estado no cambiará, aunque la acción sí se vea en Redux DevTools.

Para que esto funcione, PokemonList también debe pasar pokemon.id como prop al PokemonCard. Una vez conectado, hacer clic en la estrella alterna entre llena y vacía, y el estado global refleja qué Pokémon son favoritos.

¿Te animas a contar en los comentarios cuáles fueron los primeros tres Pokémon que marcaste como favoritos en tu propio proyecto?

Juan Camilo Lentino Villalba

Hace 4 años

en el minuto 15:41 al parecer hay un pequeño corte, si al terminar la clase falla o se rompe la aplicación, lo único que debemos hacer es pasar favorite como props desde el componente PokemonList al componente PokemonCard

const PokemonList = ({ pokemons })=> {
    console.log(pokemons)


    return (
        <div className="PokemonList">
            {
                pokemons.map(pokemon => (
                    <PokemonCard 
                        name={pokemon.name} 
                        key={pokemon.name} 
                        image={pokemon.sprites.front_default} 
                        types={pokemon.types} 
                        id={pokemon.id}
                        favorite={pokemon.favorite} // **
                    />
                ))
            }
        </div>
    )
}

luego debemos recibir esa prop en el componente PokemonCard y pasarla como valor de la prop isFavorite que PokemonCard le pasa a el componente StarButton

const PokemonCard = ({ name, image, types, id, favorite })=> {
    const dispatch = useDispatch()

    const handleOnFavorite = ()=> {
        dispatch(setFavorite({ pokemonId: id}))
    }

    return (
        <Card 
            ..... 
            extra={<StarButton isFavorite={favorite} onClick={handleOnFavorite} />}
        >
        </Card>
    )
}

de esta forma la aplicación no se romperá y tendríamos el código igual al de la clase, debemos saber que la API no contiene esta propiedad en un inicio, cada objeto pokemon no contiene esta propiedad favorite por defecto, pero el código funciona y la razón es que, en un inicio cuando pasamos la prop favorite desde el componente PokemonList al componente PokemonCard, el valor de esta prop es undefined, no esta definido aun, cuando la recibimos en PokemonCard y pasamos como valor de la prop isFavorite a el componente StarButton sigue siendo undefined, este componente StarButton la recibe y hace una validación con esta propiedad isFavorite, al ser su valor undefined renderizara el componente StarOutLined

const StarButton = ({ isFavorite, onClick })=> {
    const Icon = isFavorite ? StarFilled : StarOutlined
    
    return <Button icon={<Icon/>} onClick={onClick}>

    </Button>
}

esta propiedad favorite se añade a los objetos pokemon cuando se dispara la acción setFavorite y llega al reducer

export const pokemonsReducer = (state = initialState, action)=> {
    switch(action.type){
        case SET_POKEMONS:
            .... 
        case SET_FAVORITE:
            const newPokemonList = [ ...state.pokemons ]
            const pokemonIndex = newPokemonList.findIndex(pokemon => pokemon.id === action.payload.pokemonId)

            if (pokemonIndex < 0){
                return state
            }

            newPokemonList[pokemonIndex].favorite = !newPokemonList[pokemonIndex].favorite 
            return { ...state, pokemons: newPokemonList }
        case SET_LOADING:
                ....
        default: 
            return state 
    }
}

este caso del reducer lo que hace es crear la nueva propiedad favorite en el objeto pokemon y darle como valor lo opuesto al valor que tiene, como acabamos de crear la propiedad y no le hemos dado un valor aun, su valor por defecto es undefined y al darle como valor lo opuesto a undefined su valor al final seria true

console.log(!undefined) // true

de esta manera hemos creado la propiedad favorite con su valor en true en el objeto pokemon al que demos click, y al dar click nuevamente su valor será lo opuesto, es decir de true a false y así cada vez que demos click. Analizando un poco el flujo de la data, pude notar que estaríamos creando esta propiedad solo en algunos objetos pokemon, al final tendriamos objetos pokemon que tienen una propiedad favorite y otros que no, lo cual puede generarnos conflictos en un futuro, para evitar esto lo hice de otra forma, no paso la propiedad favorite como prop de PokemonList a PokemonCard

const PokemonList = ({ pokemons })=> {
    console.log(pokemons)


    return (
        <div className="PokemonList">
            {
                pokemons.map(pokemon => (
                    <PokemonCard 
                        name={pokemon.name} 
                        key={pokemon.name} 
                        image={pokemon.sprites.front_default} 
                        types={pokemon.types} 
                        id={pokemon.id}
                    />
                ))
            }
        </div>
    )
}

por lo tanto, no la recibo en el componente PokemonCard, lo que hago es crear un estado local con valor inicial en false

const [favoriteLocal, setFavoriteLocal] = useState(false)

se lo paso como valor de la prop isFavorite a el componente StarButton, este componente StarButton al recibir la acción de click dispara la acción setFavorite la cual no recibirá un objeto {pokemonId: id}, solamente id, y cambiara el valor del estado local a su opuesto con setFavoriteLocal

const PokemonCard = ({ name, image, types, id })=> {
    const dispatch = useDispatch()
    const [favoriteLocal, setFavoriteLocal] = useState(false)

    const handleOnFavorite = ()=> {
        dispatch(setFavorite(id))
        setFavoriteLocal(!favoriteLocal)
    }

    return (
        <Card 
            style={{width: 250}} 
            title={name} 
            cover={<img src={image} alt={name} />} 
            extra={<StarButton isFavorite={favoriteLocal} onClick={handleOnFavorite} />}
        >
            ....
        </Card>
    )
}

sabemos que el componente StarButton esta recibiendo esa prop y haciendo una validación con ella, cuando el valor de esta prop sea true renderizara el componente StarFilled, de esta manera solucionaríamos el problema del renderizado y al dar click en las card se estará llenando y vaciando la estrella, pero el cambio mas grande esta en la acción que se disparo cuando llega al reducer, debemos añadir una nueva propiedad favorite con valor de un array vacío al estado inicial

const initialState = {
    pokemons: [],
    loading: false,
    favorite: [],
}

una vez añadida la nueva propiedad solo debemos modificar el caso SET_FAVORITE, lo que este caso hará será añadir el objeto pokemon al que demos click al array de favoritos, y en caso de que ya exista, lo eliminara del arreglo

export const pokemonsReducer = (state = initialState, action)=> {
    switch(action.type){
        case SET_POKEMONS:
            ....
        case SET_FAVORITE:
            const x = state.pokemons.find(element => element.id == action.payload)
            const element = state.favorite.find(element => element.id == action.payload)

            if (element === undefined){
                return { ...state, favorite: [...state.favorite, x ]} 
            } else {
                const filter = state.favorite.filter(elem => elem.id !== action.payload )
                return { ...state, favorite: [ ...filter ] }
         }
        case SET_LOADING:
                ....
        default: 
            return state 
    }
}

de esta manera, al dar click sobre un card de un pokemon se añadirá ese objeto al arreglo de favoritos y su estrella se llenara, al dar click nuevamente se sacara del arreglo y su estrella se vaciara, al final tendríamos un arreglo de pokemons con todos nuestros objetos pokemon intactos y otro arreglo con solo nuestros objetos pokemon favoritos

Daniela Chaux Gallego

Hace 4 años

Muchas gracias!!

DANIEL MURCIA

Hace 3 años

pfff , es demasiado detalle para saltarse en un curso de Redux.

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

Cómo guardar Pokémon favoritos con Redux