TypeError: Cannot read property 'map' of undefined in react-redux

Question

Im new to React and Redux and still kinda confused a little bit.

My goal is to render a bunch of json datas in the HTML by using GET request. I'm using react and redux to manage the state of the objects, but I believe my problem is that the data is not even there

so basically whenever someone request a URL /courses , he/she will see bunch of data in json.

I get the error in the component

TypeError: Cannot read property 'map' of undefined

Here's the code

Action

export function getCourses() {
  return (dispatch) => {

    return fetch('/courses', {
      method: 'get',
      headers: { 'Content-Type', 'application/json' },
    }).then((response) => {
      if (response.ok) {
        return response.json().then((json) => {
          dispatch({
            type: 'GET_COURSES',
            courses: json.courses
          });
        })
      }
    });
  }
}

Reducer

export default function course(state={}, action) {

  switch (action.type) {
    case 'GET_COURSES':
      return Object.assign({}, state, {
        courses: action.courses
      })
    default:
      return state;
  }


}

Component

import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';


class Course extends React.Component {



  allCourses() {
    return this.props.courses.map((course) => {
      return(
        <li>{ course.name }</li>
      );

    });
  }

  render() {
    return (
      <div>
        <ul>
          { this.allCourses() }
        </ul>

      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    courses: state.courses
  }
}

export default connect(mapStateToProps)(Course);

Index reducer, where i combine everything

import { combineReducers } from 'redux';
import course from './course';

export default combineReducers({
  course,
});

Configure Store , where i store the intial state and the reducer

import { applyMiddleware, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

export default function configureStore(initialState) {
  const store = createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(thunk),
      typeof window == 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f
    )
  );

  return store;
}

I believe why the data is not there is because i didn't call the action? any help would be appreciated.

Is that your only reducer? Or are you combining reducers somewhere else? Can you show us where you initialise the store? — Marco Scabbiolo
– Marco Scabbiolo, Commented Jul 31, 2016 at 6:14

Marco Scabbiolo · Accepted Answer · 2016-08-02 01:49:39Z

7

mapStateToProps takes the root state as an argument (your index reducer, which is also the root reducer), not your course reducer. As far as I can tell this is the structure of your store:

-index <- This is the root reducer
  -course

So to get the courses from that state, in your component:

// state is the state of the root reducer
const mapStateToProps = (state) => {
  return {
    courses: state.course.courses
  }
}

Also, you might consider initialising the state of the course reducer with an empty array of courses, so if you have to render the component before the action is fired, you won't get the error.

const initialState = {
    courses: []
};

export default function course(state= initialState, action) {

    ...

}

Finally, you're not firing the action at all, so you will never actually get the courses, I assume you want them to be retrieved once the Course component is loaded, for that you can use the componentDidMount event in your component.

First of all, you need to map the action to a property of the component

// Make sure you import the action
import { getCourses } from './pathToAction';

...

const mapDispatchToProps = (dispatch) => {
  return {
    onGetCourses: () => dispatch(getCourses())
  };
}

// Connect also with the dispatcher
export default connect(masStateToProps, mapDispatchToProps)(Course);

Now call the onGetCourses property when the component mounts

class Course extends React.Component {

    componentDidMount() {
      this.props.onGetCourses();
    }

    ...

}

edited Aug 2, 2016 at 1:49

answered Jul 31, 2016 at 6:22

Marco Scabbiolo

7,4793 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

sinusGob Over a year ago

I already edited the question with extra information. courses is definitely an array. i have test it out and it return an array of objects.

sinusGob Over a year ago

But for some reason i thing the problem is with the reducers or the action is not firing at all

Marco Scabbiolo Over a year ago

@sinusGob Thanks for sharing the rest of the code! I've edited my answer, you had an error in the component.

sinusGob Over a year ago

In reducer is it correct? now there is no error but the array appear to be empty. I believe the action is not even call, because there is no event triggering it.

sinusGob Over a year ago

How do i properly do a GET in react-redux?

|

abhirathore2006 · Accepted Answer · 2016-07-31 06:18:15Z

2

its because props sometime can be undefined so you have to write a condtion like this

allCourses() {
     if(this.props.courses){
    return this.props.courses.map((course) => {
      return(
        <li>{ course.name }</li>
      );
    });
   }
   else {
   return []; 
  }

answered Jul 31, 2016 at 6:18

abhirathore2006

3,8551 gold badge28 silver badges29 bronze badges

2 Comments

sinusGob Over a year ago

the props is undefined. Is it because my action is not firing ?

abhirathore2006 Over a year ago

yes that can be the case, you can use the redux devtools extension to check if your action getting fired or not , also you should pass the initial state in such a way that you can check if props are filled with data or not.

Collectives™ on Stack Overflow

TypeError: Cannot read property 'map' of undefined in react-redux

2 Answers 2

12 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related