connect (mapStateToProps, {function}) не устанавливает функцию в this.props - React / Redux

Question

Я пытаюсь вызвать мой API для componentDidMount в моем компоненте Leads следующим образом:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getLeads } from "../../actions/leads";

export class Leads extends Component {

    componentDidMount() {
        this.props.getLeads();
    }

    render() {
        return (
            <div>
                <h1>Leads List</h1>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    leads: state.leadsReducer.leads
});


export default connect(mapStateToProps, { getLeads })(Leads);

Проблема в том, что функция connect() в последней строке не отображаетсяустановить getLeads как метод для this.props.

Когда я регистрирую this.props, я получаю пустое {}.

Когда я собираю и запускаю приложение, я получаю в консоли следующее:

Uncaught TypeError: this.props.getLeads is not a function
    at Leads.componentDidMount (Leads.js:42)
    at commitLifeCycles (react-dom.development.js:17130)
    at commitAllLifeCycles (react-dom.development.js:18532)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:18744)
    at eval (react-dom.development.js:20214)
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at completeRoot (react-dom.development.js:20213)

Вот мои ../actions/leads.js

import axios from 'axios';
import { GET_LEADS } from './types';


// GET LEADS
export const getLeads = () => (dispatch) => {
    axios
        .get("/api/leads/")
        .then(res => {
            dispatch({
                type: GET_LEADS,
                payload: res.data
            });
        })
        .catch(err =>console.log(err));
};

Я знаю, что мне здесь не хватает чего-то глупого, было бы здорово узнать, что.

Answer 1

Вы не должны экспортировать класс, а только экспортировать подключенный экземпляр, в противном случае, если вы используете класс без обернутого соединения HOC, вы не увидите реквизиты из магазина redux

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getLeads } from "../../actions/leads";

class Leads extends Component {

    componentDidMount() {
        this.props.getLeads();
    }

    render() {
        return (
            <div>
                <h1>Leads List</h1>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    leads: state.leadsReducer.leads
});


export default connect(mapStateToProps, { getLeads })(Leads);

Сейчас вЧтобы использовать Leads компонент, вы должны импортировать как импорт по умолчанию, например

import Leads from './path/to/Leads';