CODEWITHSUNDEEP
reactjstypescriptreact-redux
user581157
user581157

Reputation: 1419

Typescript constraints with redux connect

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.

Upvotes: 0

Views: 98

Answers (1)

Roman Haivaronski
Roman Haivaronski

Reputation: 530

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 (...)
}

Upvotes: 1

Related Questions