Tengo el siguiente componente Home que se renderiza ni bien carga la pagina, el cual no me esta trayendo el estado con useSelector, verifique en redux devtools y el state llega undefined, verifique la action, el reducer y en la accion hice un console.log para verificar que llegue info de la API, la info llega pero no esta haciendo el dispatch, no lo logro encontrar el error
COMPONENTE HOME: renderiza el estado inicial que deberia un ser array de objetos pokemon iterable para crear componentes CARD de cada pokemon, el estado inicial llega undefined apesar de usar async await
import React from 'react';
import { Link } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getPokemons } from '../actions';
import { GET_POKEMON } from '../actionTypes/actonTypes';
import Card from './Card';
export default function Home(){
const dispatch = useDispatch();
const allPokemons = useSelector((state) => state.pokemones);
useEffect( () => {
dispatch(getPokemons());
}, [])
function handleClick(e){
e.preventDefault();
dispatch(getPokemons());
}
return(
<div>
<Link to='/pokemon'>
Atrapar pokemons
</Link>
<h1>Hora de atrapar pokemons</h1>
<div>
<select>
<option value="asc">Ascendente</option>
<option value="desc">Descendente</option>
</select>
<select>
<option value="all">Pokemons existentes</option>
<option value="creados">Pokemons creados</option>
<option value="tipos">Tipos de pokemons</option>
</select>
</div>
<button>Volver a cargar pokemons</button>
{
allPokemons && allPokemons.map( p => {
<Card nombre={p.nombre}
vida={p.vida}
fuerza={p.fuerza}
defensa={p.defensa}
velocidad={p.velocidad}
altura={p.altura}
peso={p.peso}
tipo={p.tipo}
createdInDb={p.createdInDb}
/>
})
}
</div>
)
}
REDUCER:
const initialState = {
pokemones : []
}
function rootReducer(state=initialState, action){
switch (action.type) {
case "GET_POKEMON":
return{
...state,
pokemones : action.payload
}
default:
break;
}
}
export default rootReducer;
ACTION: En la action para revisar la conexion el back como prueba comente la linea 1 y 2 obteniendo la informacion que muestro mas abajo pero cuando las descomento al probar no retorna nada
export async function getPokemons(){
//linea1 return async function(dispatch){
return await axios.get('http://localhost:3003/pokemons')
.then(json => {
console.log(json.data)
//linea 2 dispatch({type: "GET_POKEMON", payload: json.data})
})
}
}
INFO QUE LLEGA DE LA ACTION:
ERROR EN CONSOLA:
IMAGEN DE REDUX DEVTOOLS
import { connect } from 'react-redux'
bla blaexport default connect()(Home)