Redux form props & typescript Redux form props & typescript reactjs reactjs

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);

Edit Redux Form + Typescript example

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.