Funcionalidad de Favoritos en Aplicación de Pokémon con Redux

Elegir a nuestros Pokémon favoritos es más que una actividad lúdica, es un desafío técnico que involucra conocimientos de programación y manipulación de estado en aplicaciones. En este artículo, vamos a descubrir cómo dar vida a esa funcionalidad dentro de un proyecto, asegurándonos de que cada Pokémon muestre correctamente sus tipos y permita marcarlos como favoritos.

¿Cómo podemos mapear los tipos de Pokémon en el proyecto?

Para mapear correctamente los tipos de Pokémon necesitamos realizar un par de ajustes en nuestro código. Sigamos los siguientes pasos:

• Revisemos el componente de la tarjeta de Pokémon y busquemos el lugar donde se han hardcodeado los tipos.
• Utilicemos las herramientas de desarrollo para inspeccionar la estructura de los datos de nuestros Pokémon y localicemos la propiedad que contiene los tipos.
• Añadamos en el componente una constante que nos permita mapear cada tipo del arreglo de tipos y concatenarlos en un string con el método join().

¿Cómo agregamos los tipos de cada Pokémon a las tarjetas?

Una vez identificada la estructura de los datos, procedamos a integrar la funcionalidad:

• Asegurémonos de que estamos pasando la información de los tipos desde el componente padre.
• En el componente de lista de Pokémon, agreguemos los tipos al conjunto de props que se envían a cada tarjeta de Pokémon.
• Iteremos sobre los tipos recibidos en las props y formemos un string que los incluya todos.

¿Cómo le damos funcionalidad al botón de favoritos?

Para que el botón de favoritos tenga la funcionalidad esperada, realicemos lo siguiente:

1. Creemos un nuevo componente llamado StarButton.
2. Importemos el componente Button desde la biblioteca de diseño que estemos utilizando.
3. Diseñemos el componente StarButton para recibir props que indiquen si el Pokémon está marcado como favorito y qué acción realizar al hacer clic.

¿Qué ícono mostramos dependiendo del estado de favorito?

El diseño de nuestro botón deberá ser capaz de mostrar un ícono diferente dependiendo de si el Pokémon ha sido marcado como favorito o no:

• Definamos una variable que decida qué ícono renderizar. Si el Pokémon es favorito mostraremos un ícono lleno, de lo contrario, un ícono delineado.
• Integremos el ícono al botón y asegurémonos de que se renderice correctamente.

¿Cómo gestionamos el estado de favoritos en Redux?

Para manejar los favoritos necesitamos actualizar nuestro estado global con Redux:

• Creemos un Action Creator que nos permita definir un Pokémon como favorito.
• Definamos un nuevo tipo de acción para agregar a nuestros favoritos.
• Implementemos el reducer correspondiente, buscando el index del Pokémon y haciendo toggle de la propiedad favorito.

¿Cómo enviamos la acción de agregar a favoritos?

Una vez tenemos nuestro Action Creator y reducer listos, es momento de conectarlos con el componente:

• Utilicemos el hook useDispatch para enviar acciones a nuestro store de Redux.
• En el evento onClick de nuestro StarButton, hagamos dispatch de la acción de agregar a favoritos.

Esta funcionalidad, una vez completada, no solo mejora la interacción del usuario con la aplicación, sino que también es un excelente ejercicio para comprender cómo la gestión de estado y los componentes pueden trabajar juntos para ofrecer una experiencia dinámica y personalizada. Recuerda que los conceptos de inmutabilidad son cruciales a la hora de trabajar con Redux, y próximamente entenderemos mejor su importancia. ¡Sigue adelante con tu aprendizaje y no te pierdas el próximo módulo donde profundizaremos en estos temas!