Redux Form Typescript Pass Custom Props

Question

I am trying to pass custom props to my component which is decorated with reduxForm. Also I am very new in Typescript.

The first problem is that I can't wrap the decorated component with connect:

export default
    connect(mapStateToProps)(
        reduxForm({
            form: 'myform'
        })(MyComponent)
    )

The error:

Error:(89, 5) TS2345:Argument of type 'DecoratedComponentClass<any, Partial<ConfigProps<any, {}>>>' is not assignable to parameter of type 'ComponentType<{ addressValue: any; isDeliveryAddress: any; customerTypeValue: any; } & DispatchPr...'.
Type 'DecoratedComponentClass<any, Partial<ConfigProps<any, {}>>>' is not assignable to type 'StatelessComponent<{ addressValue: any; isDeliveryAddress: any; customerTypeValue: any; } & Dispa...'.
Type 'DecoratedComponentClass<any, Partial<ConfigProps<any, {}>>>' provides no match for the signature '(props: { addressValue: any; isDeliveryAddress: any; customerTypeValue: any; } & DispatchProp<any> & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

It's obviously caused by wrong types but as I said I am new in Typescript and I am not sure how to deal with these long errors. At this moment I don't need to pass any props to the validate form function but it will be very helpful for future tasks.

The main problem is that I can't pass custom props to the decorated component:

export default reduxForm({
    form: 'myform'
})(
    connect(mapStateToProps)(MyComponent)
);

the form props:

interface Props extends InjectedFormProps {
    onSubmit: () => void;
    // some values from the state
    loading: boolean; // the custom prop
}

and when I try this:

<MyForm loading onSubmit={this.handleSubmit} />

it throws another error:

Error:(134, 25) TS2339:Property 'loading' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<any, Partial<ConfigProps<any, {}>>>> ...'.

The strange part is that I am able to pass props that are declared in the InjectedFormProps interface but I can't pass any custom props. Actually, I am able to pass any props from the mapStateToProps function. Maybe I just can't pass any custom props to the decorated component with reduxForm.

Denis Isaev · Accepted Answer · 2017-12-14 20:22:26Z

Working solution for @types/redux-form 7.0.10 and redux-form 7.1.2:

Define form component in MyForm.tsx:

import * as React from "react";
import { InjectedFormProps, reduxForm } from 'redux-form';
import { connect } from 'react-redux';

interface StateProps {
  valueFromState: string;
}

interface Props extends StateProps {
    loading: boolean; // the custom prop
}

const MyForm: React.StatelessComponent<Props & InjectedFormProps<{}, Props>> =
  ({handleSubmit, loading}) => (
    <form onSubmit={handleSubmit}>
      {loading && (<p>loading...</p>)}
    </form>
)

const mapStateToProps = (state: any): StateProps => ({valueFromState: "1"});

export default connect(mapStateToProps)(
  reduxForm<{}, Props>({
    form: 'myform'
  })(MyForm)
);

Then use it:

import MyForm from './MyForm';
<MyForm onSubmit={() => console.log("submit")} loading />

niba · Accepted Answer · 2017-09-04 12:54:26Z

2

Here you have an example how to define custom props:

import { FormProps, reduxForm } from "redux-form";

interface InitialValuesProps {
  name: string;
}

interface CustomFormProps extends FormProps<InitialValuesProps, {}, {}> {
  loading: boolean;
}

class CustomForm extends React.Component<CustomFormProps> {
   render() {
      const loading = this.props.loading 
      const name = this.props.initialValues.name;
   }
}

export default reduxForm({ form: 'myForm' })(CustomForm)

answered Sep 4, 2017 at 12:54

niba

2,9011 gold badge22 silver badges23 bronze badges

7 Comments

Dan Andreasson Over a year ago

I get error TS2315: Type 'FormProps' is not generic. when trying this. redux-form 7.2.0. @types/redux-form 7.0.9

niba Over a year ago

It seems that typings have changed for version 7. I will try to update my answer later

Christian Ravn Over a year ago

@niba Did you ever find a solution to the problem with the new typings?

harry Over a year ago

@niba Did you find a solution having the same issue.

niba Over a year ago

@ChristianRavn I haven't been using redux-form since my answer so I didn't feel the need to look anymore. What's the problem with Denis answer?

|

Collectives™ on Stack Overflow

Redux Form Typescript Pass Custom Props

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related