[英]“this.props.dispatch” dispatching wrong action
I'm exporting a component without mapping dispatch to props like this, in order to make dispatch available by default to props. 我正在导出一个组件,而没有将调度映射到props这样, 以使调度默认情况下可用于props。 : :
export default connect(
mapStateToProps
)(Radium(ClientList));
I have the following action creator: 我有以下动作创建者:
export function organizeDownloadableClientCustomerData(downloadableClientCustomerData) {
return {
type: 'ORGANIZE_DOWNLOADABLE_CLIENT_PAGE_DATA',
downloadableClientCustomerData: downloadableClientCustomerData
}
}
When I dispatch it: 当我发送它时:
componentDidMount() {
this.props.dispatch(this.fetchCustomerData());
}
It dispatches the first action I've defined on actions.js
: 它分派我在actions.js
定义的第一个动作:
export const navigate = eventLink => {
return {
type: 'NAVIGATE',
eventLink: eventLink
}
}
Which makes no sense at all . 这是没有意义的 。 I know I should be making API requests far away from componentDidMount with fancy redux-saga, but I'm getting there. 我知道我应该使用花哨的redux-saga向远离componentDidMount的地方发出API请求,但是我到达了那里。 Funny thing is, if I dispatch it like this: 有趣的是,如果我这样发送它:
componentDidMount() {
this.props.dispatch({
type: 'ORGANIZE_DOWNLOADABLE_CLIENT_PAGE_DATA',
downloadableClientCustomerData: downloadableClientCustomerData
});
}
It works like a charm. 它像一种魅力。 Why it dispatches a wrong action if it's through an action creator??? 如果通过动作创建者,为什么它会调度错误的动作???
EDIT (fetchCustomerData): 编辑(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: 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));
}
I can't believe it!!! 我简直不敢相信!!! I've changed the import just to test the luck after @Ryan Cogswell asked, from import organizeDownloadableClientCustomerData from "../../actions.js";
我已经更改了导入,只是为了在@Ryan Cogswell询问后import organizeDownloadableClientCustomerData from "../../actions.js";
测试运气import organizeDownloadableClientCustomerData from "../../actions.js";
to import { organizeDownloadableClientCustomerData } from "../../actions.js";
import { organizeDownloadableClientCustomerData } from "../../actions.js";
and just bloody worked!!! 只是血腥的工作!!! (It dispatched the correct action) I've lost almost a whole day of work because of this. (它发出了正确的动作)因此,我几乎整天都在工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.