0

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:

introducir la descripción de la imagen aquí

ERROR EN CONSOLA:

introducir la descripción de la imagen aquí

IMAGEN DE REDUX DEVTOOLS

introducir la descripción de la imagen aquí

2
  • Suena a que tu componente raiz (Home me imagino) no está conectado a tu store de redux. (Ejemplo en inglés) reactjstutorials.com/react-redux/10/redux-connect import { connect } from 'react-redux' bla bla export default connect()(Home)
    – yms
    Commented el 12 may. 2022 a las 18:35
  • No es el error, el componente esta conectando el problema esta con el useSelector que el estado llega undefined, probe con la guia que pasas pero sigue sin conectar con el estado
    – Will Diaz
    Commented el 12 may. 2022 a las 20:29

1 respuesta 1

0

El problema de esto luego de leer mucha documentación fueron tres errores:

  1. el reducer no estaba retornando nada por default
  2. cambie createStore por configureStore
  3. una ligera modificacion en la action
1
  • puedes subir la respuesta completa ?
    – qleoz12
    Commented el 22 ago. 2023 a las 3:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.