Question

我正在导出一个组件，而没有将调度映射到诸如in order to make dispatch available by default to props.这样的道具上：

export default connect(
    mapStateToProps
)(Radium(ClientList));

我有以下动作创建者：

export function organizeDownloadableClientCustomerData(downloadableClientCustomerData) {
    return {
        type: 'ORGANIZE_DOWNLOADABLE_CLIENT_PAGE_DATA',
        downloadableClientCustomerData: downloadableClientCustomerData
    }
}

当我调度它时：

componentDidMount() {
    this.props.dispatch(this.fetchCustomerData());
}

它调度我在actions.js上定义的第一个动作：

export const navigate = eventLink => {
    return {
        type: 'NAVIGATE',
        eventLink: eventLink
    }
}

完全没有意义。我知道我应该使用花哨的redux-saga向远离componentDidMount的地方发出API请求，但是我到达了那里。有趣的是，如果我这样发送它：

componentDidMount() {
    this.props.dispatch({
        type: 'ORGANIZE_DOWNLOADABLE_CLIENT_PAGE_DATA',
        downloadableClientCustomerData: downloadableClientCustomerData
    });
}

它就像一种魅力。为什么通过动作创建者会发出错误的动作？

编辑（fetchCustomerData）：

fetchCustomerData() {
    return dispatch => {
        dispatch({ type: 'FETCH_DOWNLOADABLE_CLIENT_CUSTOMER_DATA_BEGIN' });
        return fetch(`${backendAddress}/fetch_customers/?acquirer=${this.props.storeState.currentAcquirer}`)
            .then(res => res.json())
            .then(responseData => {
                dispatch({
                    type: 'FETCH_DOWNLOADABLE_CLIENT_CUSTOMER_DATA_SUCCESS',
                    responseData: responseData
                });
                this.fitDataIntoPages(this.props.storeState.downloadableClientCustomerData.responseData);
                return true;
            })
            .catch(error => {
                dispatch({
                    type: 'FETCH_DOWNLOADABLE_CLIENT_CUSTOMER_DATA_ERROR',
                    payload: { error }
                });
                return false;
            });
    };
}

EDIT2：

fitDataIntoPages(data) {
    ...
    let downloadableClientCustomerData = {
        responseData: data,
        organizedData: organizedData,
        customerElements: customerElements,
        totalItems: totalItems,
        numberOfPages: Math.ceil(totalItems / this.props.storeState.downloadableClientCustomerData.pageCount)
    }
    this.props.dispatch(organizeDownloadableClientCustomerData(downloadableClientCustomerData));
}

Answer 1

我不敢相信！！！在@Ryan Cogswell询问后，我已经更改了导入以测试运气，从import organizeDownloadableClientCustomerData from "../../actions.js";更改为import { organizeDownloadableClientCustomerData } from "../../actions.js";，但该死了！（它发出了正确的动作）因此，我几乎整天都在工作。

“ this.props.dispatch”调度错误的动作

1 个答案: