title: React - TypeError: this.props.courses.map is not a function
body: <p>I have created a react-redux application. Currently what it does is load courses from the server(api), and displays them to the course component. This works perfectly. I'm trying to add a feature where you can create a course by posting it to the server, the server would then true an a success object. However, when i post to the server i get the following error(see below). I think this is due to my connect statement listening for the load courses action. Clearly its thinking it should be getting a list of something, instead of a success object. I have tried a few thing for it to listen for both courses and the success response, but to save you the time of reading all the strange thing i have done, i could not get it to work. Dose anyone know how to fix this issue ? </p>
  
  <p>error </p>
  
  <pre><code>TypeError: this.props.courses.map is not a function
  </code></pre>
  
  <p>course.component.js</p>
  
  <pre><code>    onSave(){
          // this.props.createCourse(this.state.course); 
          this.props.actions.createCourse(this.state.course); 
      }
      render() {
          return (
              &lt;div&gt;
                  &lt;div className="row"&gt;
                      &lt;h2&gt;Couses&lt;/h2&gt;
                      {this.props.courses.map(this.courseRow)}
                      &lt;input 
                          type="text"
                          onChange={this.onTitleChange}
                          value={this.state.course.title} /&gt;
                      &lt;input 
                          type="submit"
                          onClick={this.onSave}
                          value="Save" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  // Error occurs here 
  function mapStateToProps(state, ownProps) {
    return {
      courses: state.courses
    };
  }
  function mapDispatchToProps(dispatch) {
      return {
          actions: bindActionCreators(courseActions, dispatch)
      };
  }
  export default connect(mapStateToProps, mapDispatchToProps)(Course);
  </code></pre>
  
  <p>course.actions.js</p>
  
  <pre><code>export function loadCourse(response) {
      return {
          type: REQUEST_POSTS,
          response
      };
  }
  export function fetchCourses() {
      return dispatch =&gt; {
          return fetch('http://localhost:3000/api/test')
              .then(data =&gt; data.json())
              .then(data =&gt; {
                  dispatch(loadCourse(data));
              }).catch(error =&gt; {
                  throw (error);
              });
      };
  }
  export function createCourse(response) {
      return dispatch =&gt; {
          return fetch('http://localhost:3000/api/json', {
              method: 'POST',
              headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                  response: response
              })
          })
          .then(data =&gt; data.json())
          .then(data =&gt; {
              dispatch(loadCourse(data));
          }).catch(error =&gt; {
              throw (error);
          });
      };
  }
  </code></pre>
  
  <p>course.reducer.js</p>
  
  <pre><code>export default function courseReducer(state = [], action) {
      switch (action.type) {
          case 'REQUEST_POSTS':
              return action.response;
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>server.js</p>
  
  <pre><code>router.get('/test', function(req, res, next) {
    res.json(courses);
  });
  
  router.post('/json', function(req, res, next) {
    console.log(req.body);
    res.json({response: 200});
  });
  </code></pre>
  
  <p>i have tried added a response to the state, and listening for it in the map state to props, but still for some reason react is trying to map response to courses. Do i need a second connect method? </p>
  
  <pre><code>function mapStateToProps(state, ownProps) {
    return {
      courses: state.courses, 
      resposne: state.resposne
    };
  }
  </code></pre>
  
  <p>As you can see from the pictures response is getting mapped as courses and not as response. </p>
  
  <p>Picture 
  <a href="https://i.stack.imgur.com/OfqsB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OfqsB.png" alt="enter image description here"></a></p>