title: mockApi in componentdidmount not returning any values
body: <p>I'm trying to populate an array of object in my state when my component loads. I have the following files. What I want to happen is that my <code>caseList</code> state gets updated and after calling the loadCases method from my mockapi. The problem is it seems like I can't seem to get the values from my mockapi. I'm pretty new to react and redux so I might have missed a very key concept here.</p>
  
  <p>CaseListPage.js</p>
  
  <pre><code>import React, {PropTypes} from 'react';
  import {connect} from 'react-redux';
  import BulletImage from '../../images/icon_requestor.png';
  import {IndexLink} from 'react-router';
  import CaseListHeader from './CaseListHeader';
  import * as caseActions from '../../actions/caseActions';
  import {bindActionCreators} from 'redux';
  import CaseItems from './CaseItems';
  
  class CaseListPage extends React.Component {
      constructor(props, context) {
          super(props, context);
  
          this.state = {
              caseList: []
          };
      }
  
      componentDidMount() {
          this.props.actions.loadCases()
              .then((response) =&gt; console.log(response));
      }
  
      render() {
          return(
              &lt;div className="container-fluid"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-xs-6 form-header-container"&gt;
                          &lt;img src={BulletImage} alt="bullets" className="bulletImage pull-left" width="40"/&gt;
                          &lt;span className="form-header-cl pull-left"&gt;LIST OF REQUESTS LOGGED&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div className="col-xs-6" id="backDiv"&gt;
                          &lt;IndexLink to="/"&gt;
                              &lt;p className="form-header-back pull-right"&gt;
                                  &lt;i className="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/i&gt;
                                  BACK
                              &lt;/p&gt;
                          &lt;/IndexLink&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;CaseListHeader /&gt;
                  &lt;div className="row case-list-items"&gt;
                      {/*&lt;CaseItems items={this.state.caseList}/&gt;*/}
                      &lt;div id="caseListItem1" className="row collapse case-list-request"&gt;
                          &lt;div className="col-xs-2"&gt;
                              &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
                              &lt;span className="case-id-item"&gt;LEMUEL MALLARI&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div className="col-xs-3"&gt;
                              &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
                              &lt;span&gt;Request ID: R10000001&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div className="col-xs-2"&gt;
                              &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
                              &lt;span&gt;22/07/2018 01:00&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div className="col-xs-3"&gt;
                              &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
                              &lt;span&gt;CPO: In Progress&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div className="col-xs-1"&gt;
                              &lt;button type="button" className="btn btn-case-item"&gt;RECALL&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div className="col-xs-1"&gt;
                              &lt;button type="button" className="btn btn-case-item"&gt;TRACK&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapDispatchToProps(dispatch) {
      return {
          actions: bindActionCreators(caseActions, dispatch)
      };
  }
  
  function mapStateToProps(state, ownProps) {
      return {
          cases: state.cases
      };
  }
  
  CaseListPage.propTypes = {
      actions: PropTypes.object.isRequired,
      cases: PropTypes.arrayOf(PropTypes.object)
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(CaseListPage);
  </code></pre>
  
  <p>caseActions.js</p>
  
  <pre><code>import * as types from './actionTypes';
  import caseApi from '../api/mockCaseAPI';
  import {beginAjaxCall, ajaxCallError} from './ajaxStatusActions';
  
  export function loadCasesSuccess(cases) {
      return { type: types.LOAD_CASES_SUCCESS, cases };
  }
  
  export function loadCases() {
      return function(dispatch) {
          dispatch(beginAjaxCall());
          return caseApi.getAllCases().then(cases =&gt; {
              dispatch(loadCasesSuccess(cases));
          }).catch(error =&gt; {
              throw(error);
          });
      }; 
  }
  </code></pre>
  
  <p>caseReducer.js</p>
  
  <pre><code>import * as types from '../actions/actionTypes';
  import initialState from './initialState';
  
  export default function caseReducer(state = initialState.cases, action) {
      switch (action.type) {
          case types.LOAD_CASES_SUCCESS:
              return action.cases;
  
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>mockCaseApi.js:</p>
  
  <pre><code>import delay from './delay';
  
  const cases = [
      {
          caseid: '709460',
          requestname: 'iPhone Request',
          lastmodified: '20/07/2018 05:34',
          overallstatus: 'CPO: In Progress',
          requests: ['#caseListItem1', '#caseListItem2', '#caseListItem3']
      },
      {
          caseid: '709461',
          requestname: 'iPad Request',
          lastmodified: '22/07/2018 05:34',
          overallstatus: 'Completed',
          requests: ['#caseListItem3', '#caseListItem5', '#caseListItem6']
      },
      {
          caseid: '709462',
          requestname: 'iPhone Request',
          lastmodified: '25/07/2018 05:34',
          overallstatus: 'CPO: In Progress',
          requests: ['#caseListItem7', '#caseListItem8', '#caseListItem9']
      }
  ];
  
  class CaseAPI {
      static getAllCases() {
          return new Promise((resolve, reject) =&gt; {
              setTimeout(() =&gt; {
                  resolve(Object.assign([], cases));
              }, delay);
          });
      }
  }
  
  export default CaseAPI;
  </code></pre>
  
  <p>configureStore.dev.js</p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import rootReducer from '../reducers';
  import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
  import thunk from 'redux-thunk';
  
  export default function configureStore(initialState) {
      return createStore(
          rootReducer,
          initialState,
          applyMiddleware(thunk, reduxImmutableStateInvariant())
      );
  }
  </code></pre>