Typescript constraints with redux connect - reactjs

Question

Using typescript for react as the language i have declared a class with constraints . I need to apply the connect method to it
import * as React from 'react';
import { connect } from 'react-redux';
import { initAskadeFiles } from '../Entities/Askade/Askade.Actions';
import { Dispatch } from 'redux';
interface IProp<T> {
PropOne: T
}
interface IState<T> {
StateOne: T
}
class BaseEdit<T> extends React.Component<IProp<T>, IState<T>> {
}
export function mapDispatchToProps(dispatch: Dispatch, ownProps: any) {
return {
InsertItem: () => dispatch(initAskadeFiles())
}
}
export default connect(null, mapDispatchToProps)(BaseEdit);
And in the calling component below is the syntax
import * as React from 'react';
import BaseEditSample from './BaseEditSample';
import { City } from '../Components/GridFunctionality/City';
export class ComplexEditSample extends React.Component {
public render(): any {
<BaseEditSample<City> />
}
}
When i use the syntax with City being passed to it i get an error
what am i missing in this i need redux to be connected to this component along with the contraints? Thanks
[ts] Expected 0 type arguments, but got 1.

Answer 1

First, you can pass your actions directly to the connect without mapDispatchToProps like this:
export default connect(mapStateToProps, { state, actions })(Component);`
And in your component use the imported actions and states:
type ComponentProps = {state, actions};
export default class Component extends React.Component<ComponentProps> {
render() {
const {
data,
actions,
} = this.props
return (...)
}