Реагировать на рассылку Redux для componentDidMount -> свойство не существует

Question

Я работаю над своим первым проектом с использованием React + Redux и сталкиваюсь с несколькими проблемами, когда пытаюсь отправить функцию в компонентеDidMount. Я попытался следовать примеру Reddit API в документах, но поскольку они используют JavaScript, и я использую TypeScript, не все одинаково.

Это компонент React, где я 'Я пытаюсь добиться этого:

export class EducationComponent extends Component {
    constructor(props: any) {
        super(props);
    }

    componentDidMount() {
        const { dispatch, getUser } = this.props;
        dispatch(getUser());
    }
    public render() {
        return (
            <Content className="component">
                <Demo/>
            </Content>
        );
    }
}

function mapStateToProps(state: State) {
    const { isLoaded, isFetching, user } = state.userProfile;
    return {
        user,
        isFetching,
        isLoaded
    }
}

export default connect(mapStateToProps)(EducationComponent)
export const Education = (EducationComponent);

Я получаю следующую ошибку в строке const { dispatch, getUser } = this.props;:

Error:(16, 17) TS2339: Property 'dispatch' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Error:(16, 27) TS2339: Property 'getUser' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

Проект можно найти здесь, если есть какие-либо неопределенности: https://github.com/jLemmings/GoCVFrontend

Это правильный способ сделать это или есть лучшие варианты?

Спасибо

РЕДАКТИРОВАТЬ с текущим состоянием:

const {Content} = Layout;

export class EducationComponent extends Component {
    constructor(props: any) {
        super(props);
    }

    componentDidMount() {
        this.props.userAction();
    }
    public render() {
        return (
            <Content className="component">
                <Demo/>
            </Content>
        );
    }
}

const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
    userAction: action.getUser,
}, dispatch);

function mapStateToProps(state: State) {
    const { isLoaded, isFetching, user } = state.userProfile;
    return {
        user,
        isFetching,
        isLoaded
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(EducationComponent)

ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ (все заработало):

interface MyProps {
    getUser: () => void
}

interface MyState {
    userAction: ThunkAction<Promise<void>, {}, {}, AnyAction>
}

export class EducationComponent extends Component<MyProps, MyState> {
    static defaultProps = {getUser: undefined};

    constructor(props: any) {
        super(props);
    }

    componentDidMount() {
        this.props.getUser()
    }

    public render() {
        return (
            <Content className="component">
                <Demo/>
            </Content>
        );
    }

}

const mapDispatchToProps = (dispatch: ThunkDispatch<{}, {}, any>, ownProps: MyProps) => {
    return {
        getUser: () => {
            dispatch(getUser());
        }
    }
}

function mapStateToProps(state: State) {
    const {isLoaded, isFetching, user} = state.userProfile;
    return {
        user,
        isFetching,
        isLoaded
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(EducationComponent)

Answer 1

После просмотра вашего проекта вы импортируете компонент следующим образом:

import {Education} from "../pages/Public/Education";

Это импортирует неподключенный компонент, поэтому у вас нет доступа к диспетчеризации.

Вы должны импортировать подключенный компонент по умолчанию:

import Education from "../pages/Public/Education";

Answer 2

Вы можете сделать это следующим образом

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

// mapStateToProps

mapDispatchToProps = (state) => {
   getUser: () => dispatch(getUser()); //Don't forget to import getUser from your action creator
}

export default connect(mapStateToProps, mapDispatchToProps)(EducationComponent)
export const Education = (EducationComponent); // Delete this line no need for this because you're already exporting it as default

Ссылка: https://react -redux.js.org / using-Reaction-redux / connect-mapdispatch # arguments

Answer 3

Связываете ли вы метод отправки, используя mapDispatchToProps?