Con la maquetación Finalizada podemos conectar la Store Redux creada y nuestra aplicación frontend. Para esto primero tenemos que decirle a React que nuestra aplicación tiene una Store para usar en ella, esto se hace "encerrando" la aplicación con la etiqueta Provider, el código debe quedar de la siguiente manera.
La etiqueta Provider se encarga de decirle a React que todo dentro de esta etiqueta puede acceder al Store asignado.
Primero haremos que CantPokemon muestre la cantidad de pokemon que hay en el Store haciendo que el componente traiga el estado actual del Store y lo imprima en pantalla, el componente quedaria de la siguiente forma.
import React from 'react';
import { useSelector } from 'react-redux';
export default function CantPokemon() {
const gameShop = useSelector((state) => state.games)
return (
<React.Fragment>
Unidades : {gameShop.pokemon}
</React.Fragment>
)
}
el método useSelector() se encarga de obtener el estado actual de nuestra Store y asignarlo a una variable, en el código tomamos el estado y guardamos la propiedad games en la constante gameShop, la cual tendrá la cantidad de unidades disponible en la tienda. luego simplemente mostramos las unidades en la etiqueta.
Teniendo esto listo podemos hacer que nuestros componentes tengas los eventos para realizar la compra, devolución y búsqueda de pokemon. Primero haremos compra y devolución.
Asignaremos un onClick() a los botones en el componente ActionPokemon, el cual quedaría como el siguiente código.
La dispatch se inicializa con el método useDispatch() y este permite enviar la acción que deseamos que realice nuestro Reducer en el Store. por ello en la línea 10 se envía la acción BuyPokemonActions al dispatch cuando le damos click al botón comprar de esta forma, cada que le demos al botón comprar en el Store se restara uno a la cantidad actual de pokemon y se actualizara inmediatamente en la vista.
Para realizar el barra de búsqueda utilizaremos un Hook para guardar el valor del input para realizar la petición. esto se hacer con el método useState() que crea una variable estado y un método set para modificarla.
Teniendo la variable estado la asignamos a la etiqueta input con la propiedad "value" y creamos un método onChange() logrando que cada vez que el texto cambien en el input, la variable se actualice. y luego creamos un método onClick() en el botón enviar y hacemos que el Reducer efectué la acción fetchPokemon enviándole como valor el texto en la etiqueta input.
Con todas las acciones creadas e implementadas, procedemos a mostrar el resultado en el componente ResultPokemon. para ello solo tenemos que obtener el estado del Store y mostrar los datos que nos interesa, en este caso el nombre del pokemon y su artwork oficial.
Para mostrar las etiquetas de "Buscando", "Resultado" y "Error" React permite renderizar condicionalmente al encerrar la línea o bloque de código HTML y anteponer una condición booleana seguido de &&, como el siguiente código.
