Redux form props & typescript
You need to install the @types/redux-form
package with your package manager. The @types/redux-form
package includes types definitions for redux-form
package.
Then you can import type definitions from redux-form
, for example InjectedFormProps
.
Your form that will be wrapped with reduxForm()
should has props that extends InjectedFormProps<FormData = {}, P = {}>
.
reduxForm()
type is generic reduxForm<FormData = {}, P = {}>(...
See the example:
import * as React from 'react';import { reduxForm, InjectedFormProps, Field } from 'redux-form';import { IUser } from './index';interface IProps { message: string;}class UserForm extends React.Component<InjectedFormProps<IUser, IProps> & IProps> { render() { const { pristine, submitting, reset, handleSubmit, message } = this.props; return ( <form onSubmit={handleSubmit}> <div>{message}</div> <div> <label>First Name </label> <Field name="firstName" component="input" type="text" placeholder="First Name" /> </div> <div> <label>Last Name </label> <Field name="lastName" component="input" type="text" placeholder="Last Name" /> </div> <div> <button type="submit" disabled={pristine || submitting}> Submit </button> <button type="button" disabled={pristine || submitting} onClick={reset}> Clear Values </button> </div> </form> ); }}export default reduxForm<IUser, IProps>({ form: 'userForm',})(UserForm);
The source code of @types/redux-form
package is located here. You can see the types there and more complicated examples in the redux-form-tests.tsx file that is used for types checking.