Аргумент типа '(dispatch: Dispatch <any>, ownProps: OwnProps) => DispatchProps' не может быть назначен параметру типа 'DispatchProps'

Question

Я создаю приложение реагирования с использованием в качестве языка редукса и машинописи.Я следовал советам этой записи , чтобы создать типы для функций mapStateToProps и maptDispatchToProps.Это мой контейнер:

import { connect } from 'react-redux'
import { AppState } from 'src/store';
import { changeFilter } from 'src/store/tasks/actions';
import { Dispatch } from 'redux';
import {  VisibilityFilter } from 'src/store/tasks/types';
import * as React from 'react';

 interface OwnProps {
    filter: VisibilityFilter;
  }

  interface StateProps {
    active: boolean
  }

  interface DispatchProps {
    onClick: () => void
  }

  type Props = StateProps & DispatchProps & OwnProps

  export const Filter: React.FC<Props> = props => {
    const { active, onClick, children } = props;

    return (
      <button
        onClick={onClick}
        disabled={active}
        style={{
          marginLeft: "4px"
        }}
      >
        {children}
      </button>
    );
  };


const mapStateToProps = (state: AppState, ownProps: OwnProps): StateProps => ({
    active: ownProps.filter === state.tasksState.visibilityFilter
  })

  const mapDispatchToProps = (dispatch: Dispatch<any>, ownProps:OwnProps): DispatchProps => ({
    onClick: () => dispatch(changeFilter(ownProps.filter))
  })

  export default connect<StateProps,DispatchProps,OwnProps>(
    mapStateToProps,
    mapDispatchToProps
  )(Filter)

Но у меня возникает следующая ошибка в функции connect, говорящая это для функции mapDispatchToProps:

Аргумент типа '(dispatch: Dispatch, ownProps: OwnProps) => DispatchProps 'нельзя назначить параметру типа' DispatchProps '.Свойство 'onClick' отсутствует в типе '(dispatch: Dispatch, ownProps: OwnProps) => DispatchProps', но требуется в типе 'DispatchProps'.ts (2345) Filter.tsx (17, 5): здесь объявлено' onClick '.Filter.tsx (49, 5): Вы хотели вызвать это выражение?

Что-то не так с моим типом DispatchProps, что функция connect отклоняет его?

Если вам нужно знать, это библиотеки, которые я использую:

  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.2",
    "react-scripts-ts": "3.1.0",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.4",
    "@types/react": "^16.8.13",
    "@types/react-dom": "^16.8.4",
    "@types/react-redux": "^7.0.6",
    "typescript": "^3.4.3"
  }

Обновление

Если я удалю универсальные типы в функции connect, то ошибка исчезнет здесь ион выводит типы:

Но теперь, когда я использую Filter, контейнер заставляет меня добавить реквизит onclick в определении:

Answer 1

Я нашел решение в этой записи .Существует тип, определенный для универсального Dispatch, который называется AnyAction, который является частью библиотеки приставок, поэтому mapDispatchToProps должно быть:

 const mapDispatchToProps = (dispatch: Dispatch<AnyAction>, ownProps:OwnProps): DispatchProps => ({
    onClick: () => dispatch(changeFilter(ownProps.filter))
  })

Answer 2

вместо

const mapDispatchToProps = (dispatch: Dispatch<any>, ownProps:OwnProps): DispatchProps => ({
    onClick: () => dispatch(changeFilter(ownProps.filter))
  })

сделайте это

    //in the import section 
    import { bindActionCreators } from "redux";
        const mapDispatchToProps = (dispatch: Dispatch<any>, ownProps:OwnProps): DispatchProps => {
            return bindActionCreators ({

            changeFilter         }),
dispatch
 }

mapDispatchToProps в вашем случае, возвращая объект, который содержит функцию onClick, что не является ожидаемым поведением