TypeError: Cannot read property 'type' of undefined - Redux

Question

Good morning everyone. I am learning how to use Redux in React through a course but in developing a simple example I got stuck with an error that I don't understand where it comes from.

This happens when I click on my button and that is where the screen fills up with that error, the idea is to obtain a list of pokemon from an API and save them in a constant as you can see.

This is the component where I declare the Reduces, Actions and Constants using the Ducks methodology called pokeDuck.js

import axios from "axios";


//constantes
//Declaramos nuestro estado y nuestras acciones todo esto en constantes


const dataInicial = [{array:[]}];
const OBTENER_POKEMONES = "OBTENER_POKEMONES";





//............................................................................................................




//reduce
//Revulve la accion especificada sto es solo una function a exportar
export default function pokeReduce(state = dataInicial,action){

        switch(action.type) {
            case OBTENER_POKEMONES:
            return {...state, array:[action.payload]}
          
        
            default:
                return state;
               
        }

}



//............................................................................................................



//acciones
//Mostrar,modificar,borrar esas son las acciones en si que tambien son funciones o contsante de tipo funcion

export function ObtenerPokemones(){

    //dispatch: Activamos al reduce
    //getState: Obtenemos la data inicial la constante de arriba
    return async function (dispatch,getState){

        try {

     
            const res = await axios.get("https://pokeapi.co/api/v2/pokemon?offset=0&limit=20");

            dispatch({

                type:OBTENER_POKEMONES,
                payload: res.data.results
            })

            
        } catch (error) {
            
            console.log("Hubo un problema: "+error)
        }


    }


}

This is the store.js

All I do is export my reduces and return them

import {createStore,combineReducers,applyMiddleware} from "redux";
import thunk from "redux-thunk";
import pokeReduce from "./pokeDuck";


//COMBINAMOS EL REDUCES CON EL METODO combineReciders todas nuestras reduce las combinamos haca con un nombre relacionado
const rootReduce = combineReducers({

    pokemones: pokeReduce

});




export default function generarStore(){


 const store = createStore(rootReduce,applyMiddleware(thunk));
 return store;
 

}

I made my React component which is just a simple button that calls the pokeDuck.js action

import React, { Fragment } from 'react';
import {useDispatch,useSelector} from "react-redux"
import ObtenerPokemones from "../redux/pokeDuck"
//UseDispatch: nos va a servir para consumir nuestra accion del patico
//useSelector: nos va a servir para leer el estado o array

const Pokemones = () =>{

    const dispacth = useDispatch();

    return(

        <Fragment>
        <h2>Pokemones</h2>

        <button onClick={()=>{dispacth(ObtenerPokemones())}}>Obtener Pokemones</button>
        </Fragment>
    )


}

export default Pokemones;

And finally I import it to my application that shows everything that is the App.js

import './App.css';
import Pokemones from './components/pokemones';

import {Provider} from "react-redux"
import generarStore from "./redux/store";

function App() {

 const store = generarStore();

  return (
    <Provider store={store}>

    <Pokemones/>

    </Provider>
  );
}

export default App;

usafder usafder · Accepted Answer · 2020-11-06T11:57:46

This issue is arising because you're setting a 2D array in the reducer. Here's how:

After successfully retrieving the response from the API you're dispatching your action like below:

dispatch({
  type:OBTENER_POKEMONES,
  payload: res.data.results // now note here that res.data.results is an array
})

And in the reducer you're using the action.payload as:

case OBTENER_POKEMONES:
  return {...state, array:[action.payload]} // here array becomes [[...]] i.e. a 2D array

To resolve this you can simply use the spread operator in the reducer as shown below:

case OBTENER_POKEMONES:
  return {...state, array:[...action.payload]}

TypeError: Cannot read property 'type' of undefined - Redux

1 Answers