Question

我正在尝试在加载组件时填充处于状态的对象数组。我有以下文件。我想发生的是，我的caseList状态已更新，并在从我的嘲讽中调用loadCases方法之后。问题是似乎我似乎无法从我的嘲笑中获取值。我对响应和还原很陌生，所以我可能在这里错过了一个非常关键的概念。

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

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

根据redux文档，我认为您没有正确使用bindActionCreators：

bindActionCreators的唯一用例是，当您要将一些动作创建者传递给一个不了解Redux的组件，并且您不想将调度或Redux存储传递给它时。

请像这样写您的mapDispatchToProps：

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

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

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

componentdidmount中的mockApi不返回任何值

1 个答案: