I am getting TypeError: this.props.function is not a function while fetching from an api

Question

I am trying to fetch data from an api, but I am getting an error: TypeError: this.props.getPeople is not a function, while everything looks good through the code, as below:

people-component.js

import React, { Component } from 'react';
import './people-component-styles.css';
import { Container, Row, Col, Card } from 'react-bootstrap';
import { connect } from 'react-redux';
import { getPeople } from '../../actions/index'
import 'react-lazy-load-image-component/src/effects/blur.css';
import 'animate.css/animate.min.css';

export class People extends Component {

    componentDidMount() {
        // console.log(this.props);
        this.props.getPeople();
    }

    render() {
        // console.log(this.props);
        return (
            <Row className='main'>
                hello!  
            </Row>
        );
    }
}

const mapStateToProps = state => ({
    people: state.people
})

const mapDispatchToProps = dispatch => ({
    getPeople: () => dispatch(getPeople())
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(People);

actions/index.js

export const getPeople = () => {
    console.log("yes");
    return async dispatch => {
        const response = await fetch('https://dma.com.eg/api.php?action=getPeople', {
            method: 'GET'
        })
        const json = await response.json();
        dispatch({ type: "GET_PEOPLE", payload: json });
    }
}

reducers/index.js

const INITIAL_STATE = {
    people: []
}

const rootReducer = (state = INITIAL_STATE, action) => {

    switch (action.type) {
        case "GET_PEOPLE":
            return ({
                ...state,
                people: state.people.concat(action.payload)
            })
        default:
            return state;
    }
};

export default rootReducer

Answer 1

感谢@Brian Thompson ，我将People组件作为名称导入，而它作为默认导出。它已修复。