mockApi in componentdidmount not returning any values - reactjs

Question

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 caseList 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.
CaseListPage.js
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) => console.log(response));
}
render() {
return(
<div className="container-fluid">
<div className="row">
<div className="col-xs-6 form-header-container">
<img src={BulletImage} alt="bullets" className="bulletImage pull-left" width="40"/>
<span className="form-header-cl pull-left">LIST OF REQUESTS LOGGED</span>
</div>
<div className="col-xs-6" id="backDiv">
<IndexLink to="/">
<p className="form-header-back pull-right">
<i className="glyphicon glyphicon-chevron-left" aria-hidden="true"></i>
BACK
</p>
</IndexLink>
</div>
</div>
<CaseListHeader />
<div className="row case-list-items">
{/*<CaseItems items={this.state.caseList}/>*/}
<div id="caseListItem1" className="row collapse case-list-request">
<div className="col-xs-2">
<span> </span>
<span className="case-id-item">LEMUEL MALLARI</span>
</div>
<div className="col-xs-3">
<span> </span>
<span>Request ID: R10000001</span>
</div>
<div className="col-xs-2">
<span> </span>
<span>22/07/2018 01:00</span>
</div>
<div className="col-xs-3">
<span> </span>
<span>CPO: In Progress</span>
</div>
<div className="col-xs-1">
<button type="button" className="btn btn-case-item">RECALL</button>
</div>
<div className="col-xs-1">
<button type="button" className="btn btn-case-item">TRACK</button>
</div>
</div>
</div>
</div>
);
}
}
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);
caseActions.js
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 => {
dispatch(loadCasesSuccess(cases));
}).catch(error => {
throw(error);
});
};
}
caseReducer.js
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;
}
}
mockCaseApi.js:
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) => {
setTimeout(() => {
resolve(Object.assign([], cases));
}, delay);
});
}
}
export default CaseAPI;
configureStore.dev.js
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())
);
}

Answer 1

I don't think you are using bindActionCreators correctly, from the redux docs:
The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it.
Instead write your mapDispatchToProps like:
import { loadCases } from '../../actions/caseActions';
...
...
componentDidMount() {
this.props.loadCases()
.then((response) => console.log(response));
}
...
function mapDispatchToProps(dispatch) {
return {
loadCases: () => dispatch(loadCases())
};
}