Flow Typing #

redux-form supports static typing with Flow. Flow should automatically import the types when you import the components and functions from redux-form. In addition, you may import types for all the props provided by redux-form to your components.

Props Types #

This will give you the types of the props that will be injected into your decorated form component by the reduxForm() higher order component.

FormProps #

import type { FormProps } from 'redux-form'

type Props = {
  someCustomThing: string
} & FormProps
// ^^^^^^^^^^

class MyForm extends React.Component {
  props: Props

  render() {
    const { handleSubmit, someCustomThing } = this.props
    return (
      <form onSubmit={handleSubmit}>
        // fields here
      </form>
    )
  }
}

FieldProps #

This will give you the shape of the props provided from Field to your field component.

import type { FieldProps } from 'redux-form'

const renderField = ({ input, meta, ...rest } : FieldProps) =>
//                                           ^^^^^^^^^^^^^
  <div>
    <input {...input} {...rest}/>
    {meta.touched && meta.error && <div>{meta.error}</div>}
  </div>

...

<Field name="myField" component={renderField}/>

FieldsProps #

This will give you the shape of the props provided from Fields to your fields component.

import type { FieldsProps } from 'redux-form'

const renderField = (fields : FieldsProps) =>
//                         ^^^^^^^^^^^^^^
  <div>
    {fields.map(({ input, meta, ...rest }) =>
      <div>
        <input {...input} {...rest}/>
        {meta.touched && meta.error && <div>{meta.error}</div>}
      </div>)
    }
  </div>

...

<Fields names={[ 'firstField', 'secondField' ]} component={renderFields}/>

FieldArrayProps #

This will give you the shape of the props provided from FieldArray to your field array component.

import type { FieldArrayProps } from 'redux-form'

const renderFieldArray = ({ fields } : FieldArrayProps) =>
//                             ^^^^^^^^^^^^^^^^^^
  <ul>
    {fields.map((name, index, fields) => (
      <li key={index}>
        <Field
          name={`${name}.firstName`}
          type="text"
          component={renderField}
          label="First Name"/>
        <Field
          name={`${name}.lastName`}
          type="text"
          component={renderField}
          label="Last Name"/>
      </li>
    ))}
  </ul>

...

<FieldArray name="contacts" component={renderFieldArray}/>