title: TypeError: Cannot read property 'map' of undefined in react-redux
body: <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>