Reactjs componentdidmount中的mockApi不返回任何值

当我的组件加载时，我试图填充处于我状态的对象数组。我有以下文件。我希望发生的是，在从mockapi调用loadCases方法之后，我的

案例列表

状态得到更新。问题是我似乎无法从mockapi中获取值。我对react和redux非常陌生，所以我可能错过了一个非常关键的概念

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>&nbsp;&nbsp;</span>
                            <span className="case-id-item">LEMUEL MALLARI</span>
                        </div>
                        <div className="col-xs-3">
                            <span>&nbsp;&nbsp;</span>
                            <span>Request ID: R10000001</span>
                        </div>
                        <div className="col-xs-2">
                            <span>&nbsp;&nbsp;</span>
                            <span>22/07/2018 01:00</span>
                        </div>
                        <div className="col-xs-3">
                            <span>&nbsp;&nbsp;</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);

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())
    );
}

---

我认为您没有正确使用redux文档中的

bindActionCreators

：

bindActionCreators的唯一使用案例是，当您希望将一些动作创建者向下传递给一个不知道Redux的组件，并且不希望将dispatch或Redux存储传递给它时

而是编写

mapDispatchToProps

如下：

import { loadCases } from '../../actions/caseActions';
...

...
    componentDidMount() {
        this.props.loadCases()
            .then((response) => console.log(response));
    }
...

function mapDispatchToProps(dispatch) {
    return {
        loadCases: () => dispatch(loadCases())
    };
}

---

你能发布你的店铺创建吗？如果要从动作创建者返回函数，则需要使用

redux-thunk

中间件更新我的问题以包含存储。是的，我在用thunk。

import { loadCases } from '../../actions/caseActions';
...

...
    componentDidMount() {
        this.props.loadCases()
            .then((response) => console.log(response));
    }
...

function mapDispatchToProps(dispatch) {
    return {
        loadCases: () => dispatch(loadCases())
    };
}