“this.props.dispatch” dispatching wrong action

Question

I'm exporting a component without mapping dispatch to props like this, in order to make dispatch available by default to 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 :

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. 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() {
    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

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"; to 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.