title: Redux action call returns undefined then defined
body: <p>currently working on a react redux project.</p>
  
  <p>I was able to call my action fetchProjects() to handle an axios get request to the server.</p>
  
  <p>Problem with my code is that it console logs as undefined before populating my state with my list of projects.</p>
  
  <p>My goal is to render my list of projects on the screen upon calling the render function. But the component crashes as it renders undefined when I call this.props.projects.</p>
  
  <p>Here is the component that calls the action fetchProjects.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import Searchbar from '../../vp-ui/vp-searchbar/vp-searchbar.component.js';
  import { connect } from 'react-redux';
  import * as actions from '../../vp-services/projects/actions';
  require('./vp-genecart.component.scss');
  
  class GeneCart extends Component {
  
      constructor(props) {
          super(props);
          this.state        = { projects: [] };
          this.props.fetchProjects();
      }
  
      render() {
          console.log("h1", this.props.projects);
          return (
              &lt;div&gt;
                  hello
              &lt;/div&gt;
          )
      }
  }
  
  function mapStateToProps(state) {
      return {
          projects: state.projects.projects
      };
  }
  
  export default connect(mapStateToProps, actions)(GeneCart)</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the action that performs the get request</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import axios from 'axios';
  import history from '../../history';
  import instance from '../instance';
  import {
      PROJECTS_FETCH,
      PROJECTS_ERROR
  } from './types';
  
  export function fetchProjects() {
      return function(dispatch) {
          instance.get(
              `api/projects/`,
              {
                  withCredentials: true
              }
          ).then((response) =&gt; {
                  var projects = response.data.results;
                  dispatch({
                      type: PROJECTS_FETCH,
                      payload: projects
                  });
              })
              .catch((error) =&gt; {
                  dispatch(projectsError('Couldn\'t get projects'));
              });
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the reducer</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
      PROJECTS_FETCH,
      PROJECTS_ERROR
  } from './types';
  
  export default function(state={}, action) {
      switch(action.type) {
          case PROJECTS_FETCH:
              return { ...state, projects: action.payload };
          case PROJECTS_ERROR:
              return { ...state, error: action.payload };
      }
  
      return state;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is how it shows up on my screen
  <a href="https://i.stack.imgur.com/mVpXK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mVpXK.png" alt="enter image description here"></a></p>