TypeError: Cannot read property 'map' of undefined in react-redux
<p>Im new to React and Redux and still kinda confused a little bit.</p>

<p>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</p>

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

<p>I get the error in the component</p>

<blockquote>
  <p>TypeError: Cannot read property 'map' of undefined</p>
</blockquote>

<p>Here's the code </p>

<p>Action</p>

<pre><code>export function getCourses() {
  return (dispatch) =&gt; {

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

<p>Reducer</p>

<pre><code>export default function course(state={}, action) {

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


}
</code></pre>

<p>Component</p>

<pre><code>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) =&gt; {
      return(
        &lt;li&gt;{ course.name }&lt;/li&gt;
      );

    });
  }

  render() {
    return (
      &lt;div&gt;
        &lt;ul&gt;
          { this.allCourses() }
        &lt;/ul&gt;

      &lt;/div&gt;
    )
  }
}

const mapStateToProps = (state) =&gt; {
  return {
    courses: state.courses
  }
}

export default connect(mapStateToProps)(Course);
</code></pre>

<p>Index reducer, where i combine everything</p>

<pre><code>import { combineReducers } from 'redux';
import course from './course';

export default combineReducers({
  course,
});
</code></pre>

<p>Configure Store , where i store the intial state and the reducer</p>

<pre><code>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' &amp;&amp; typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f =&gt; f
    )
  );

  return store;
}
</code></pre>

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