Redux Form

https://redux-form.com/8.3.0/docs
Admin
Redux Form is a library that connects React form components to a Redux store, managing form state,...
Tokens:61,047
Snippets:476
Trust Score:9
Update:10 months ago
Show doc for...
Tokens:
Raw
### Wrap React Form Component with ReduxForm HOC

Source: https://redux-form.com/8.3.0/docs/GettingStarted

This example shows how to wrap a React form component with the `reduxForm()` higher-order component (HOC). This HOC connects your form component to the Redux store, providing props like `handleSubmit` and managing form state. A unique name must be provided for the form.

```javascript
import React from 'react'
import { Field, reduxForm } from 'redux-form'

let ContactForm = props => {
  const { handleSubmit } = props
  return <form onSubmit={handleSubmit}>{/* form body*/}</form>
}

ContactForm = reduxForm({
  // a unique name for the form
  form: 'contact'
})(ContactForm)

export default ContactForm
```

--------------------------------

### Handling Form Submission with Redux Form

Source: https://redux-form.com/8.3.0/docs/gettingstarted

This code demonstrates how to handle form submission by providing an `onSubmit` function to the `ContactForm` component. The submitted form values are passed as a JSON object to this function, which is then logged to the console in this example. It shows the integration of a page component with the Redux form.

```jsx
import React from 'react'
import ContactForm from './ContactForm'

class ContactPage extends React.Component {
  submit = values => {
    // print the form values to the console
    console.log(values)
  }
  render() {
    return <ContactForm onSubmit={this.submit} />
  }
}

```

--------------------------------

### Integrate Redux Form Reducer into Redux Store

Source: https://redux-form.com/8.3.0/docs/GettingStarted

This snippet demonstrates how to combine the `formReducer` from `redux-form` with your existing reducers using `combineReducers`. It ensures your Redux store can handle actions dispatched by Redux Form components. The `formReducer` must be passed under the key 'form'.

```javascript
import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'

const rootReducer = combineReducers({
  // ...your other reducers here
  // you have to pass formReducer under 'form' key,
  // for custom keys look up the docs for 'getFormState'
  form: formReducer
})

const store = createStore(rootReducer)
```

--------------------------------

### React onSubmit Handler Example with event.preventDefault()

Source: https://redux-form.com/8.3.0/docs/faq/HandleVsOn

This example illustrates how to handle a form submission in React using an `onSubmit` handler. It includes `event.preventDefault()` to stop the default browser form submission behavior and logs a message to the console.

```jsx
render() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted!');
  }
  return <button onClick={handleSubmit}>Click me</button>;
}
```

--------------------------------

### Configure Redux Form Reducer (ES5)

Source: https://redux-form.com/8.3.0/docs/api/Reducer

This ES5 example demonstrates how to combine the Redux Form reducer with other reducers using `redux.combineReducers`. It shows the import and usage for both standard and Immutable.js versions of the reducer.

```javascript
var redux = require('redux')
var formReducer = require('redux-form').reducer
// Or with Immutablejs:
// var formReducer = require('redux-form/immutable').reducer;

var reducers = {
  // ... your other reducers here ...
  form: formReducer
}
var reducer = redux.combineReducers(reducers)
var store = redux.createStore(reducer)
```

--------------------------------

### Redux Form v5 Field Definition

Source: https://redux-form.com/8.3.0/docs/MigrationGuide

This example demonstrates the Redux Form v5 approach to defining form fields using the 'fields' prop within the reduxForm decorator. It shows how props like 'username' and 'password' are destructured and applied to input elements. Note that this pattern requires the entire form component to re-render on every keypress.

```javascript
import React, { Component } from 'react'
import { reduxForm } from 'redux-form'

class MyForm extends React.Component {
  render() {
    const {
      fields: { username, password },
      handleSubmit
    } = this.props

    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="username">Username</label>
          <div>
            <input type="text" {...username} />
            {username.touched && username.error && (
              <span className="error">{username.error}</span>
            )}
          </div>
        </div>

        <div>
          <label htmlFor="password">Password</label>
          <div>
            <input type="password" {...password} /> // Duplicating same code as
            above
            {password.touched && // except for "type" prop
              password.error && <span className="error">{password.error}</span>}
          </div>
        </div>

        <button type="submit">Submit</button>
      </form>
    )
  }
}

export default reduxForm({
  form: 'myForm',
  fields: ['username', 'password']
})(MyForm)

```

--------------------------------

### React onClick Handler Example

Source: https://redux-form.com/8.3.0/docs/faq/HandleVsOn

This snippet demonstrates a standard React pattern for defining and passing an `onClick` handler to a button element. The `handleClick` function is defined within the component and then passed to the `onClick` prop of the button.

```jsx
render() {
  const handleClick = () => console.log('Clicked!');
  return <button onClick={handleClick}>Click me</button>;
}
```

--------------------------------

### Basic Redux Form Field Component Usage

Source: https://redux-form.com/8.3.0/docs/GettingStarted

Demonstrates the basic usage of the `<Field/>` component from Redux Form to connect an input element to the store. It creates a standard HTML input and manages its state internally. This component can also accept custom components or class components for more complex scenarios.

```jsx
<Field name="inputName" component="input" type="text" />
```

--------------------------------

### Importing Fields Component in ES5 and ES6

Source: https://redux-form.com/8.3.0/docs/api/fields

Demonstrates how to import the `Fields` component from the 'redux-form' library using both ES5 and ES6 module syntax. This is the initial step to utilize the component in your Redux Form setup.

```javascript
var Fields = require('redux-form').Fields // ES5
```

```javascript
import { Fields } from 'redux-form' // ES6
```

--------------------------------

### Direct Import of Redux Form Components (JavaScript)

Source: https://redux-form.com/8.3.0/docs/faq/bundlesize

This example demonstrates how to import `reduxForm`, `Field`, and `FieldArray` directly from their respective module paths to reduce bundle size. This is an alternative to importing all from the top-level `redux-form` package.

```javascript
import reduxForm from 'redux-form/reduxForm'
import Field from 'redux-form/Field'
import FieldArray from 'redux-form/FieldArray'
import actions from 'redux-form/actions'
```

--------------------------------

### Submission State API

Source: https://redux-form.com/8.3.0/docs/api/ActionCreators

Actions to control and indicate the submission status of a form, including starting, stopping, and marking submission failures or successes.

```APIDOC
## `setSubmitFailed(form:String, ...fields:String)`

### Description
Flips `submitFailed` flag `true`, removes `submitSucceeded` and `submitting`, marks all the fields passed in as `touched`, and if at least one field was passed flips `anyTouched` to `true`.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
setSubmitFailed('myForm', 'field1', 'field2');
```

### Response
N/A

## `setSubmitSucceeded(form:String)`

### Description
Flips `submitSucceeded` flag `true` and removes `submitFailed`.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
setSubmitSucceeded('myForm');
```

### Response
N/A

## `startSubmit(form:String)`

### Description
Flips the `submitting` flag `true`.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
startSubmit('myForm');
```

### Response
N/A

## `stopSubmit(form:String, errors:Object)`

### Description
Flips the `submitting` flag `false` and populates `submitError` for each field.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
stopSubmit('myForm', { field1: 'Error message' });
```

### Response
N/A

## `submit(form:String)`

### Description
Triggers a submission of the specified form.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
submit('myForm');
```

### Response
N/A
```

--------------------------------

### Configure Redux Form Reducer (ES6)

Source: https://redux-form.com/8.3.0/docs/api/Reducer

This ES6 example illustrates combining the Redux Form reducer with other reducers using `combineReducers` from Redux. It includes imports for standard and Immutable.js reducer versions and their integration into the store.

```javascript
import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
// Or with Immutablejs:
// import { reducer as formReducer } from 'redux-form/immutable';

const reducers = {
  // ... your other reducers here ...
  form: formReducer
}
const reducer = combineReducers(reducers)
const store = createStore(reducer)
```

--------------------------------

### Using FormSection to Create Reusable Form Components

Source: https://redux-form.com/8.3.0/docs/api/FormSection

This example demonstrates how FormSection can be used to create reusable components like 'Party' and 'Address' within a larger 'OrderForm'. It shows how nested field names are generated, such as 'buyer.address.streetName', and the resulting data structure.

```javascript
//Address.js
class Address extends React.Component {
    render() {
        return <div>
            <Field name="streetName" component="input" type="text"/>
            <Field name="number" component="input" type="text"/>
            <Field name="zipCode" component="input" type="text"/>
        </div>
    }
}

//Party.js
class Party extends React.Component {
    render() {
        return <div>
            <Field name="givenName" component="input" type="text"/>
            <Field name="middleName" component="input" type="text"/>
            <Field name="surname" component="input" type="text"/>
            <FormSection name="address">
                <Address/>
            </FormSection>
        </div>
    }
}

//OrderForm.js
class OrderForm extends React.Component {
    render() {
        return <form onsubmit={...}>
            <FormSection name="buyer">
                <Party/>
            </FormSection>
            <FormSection name="recipient">
                <Party/>
            </FormSection>
        </form>
    }
}
//don't forget to connect OrderForm with reduxForm()
```

```json
{
    "buyer": {
        "givenName": "xxx",
        "middleName": "yyy",
        "surname": "zzz",
        "address": {
            "streetName": undefined,
            "number": "123",
            "zipCode": "9090"
        }
    },
    "recipient": {
        "givenName": "aaa",
        "middleName": "bbb",
        "surname": "ccc",
        "address": {
            "streetName": "foo",
            "number": "4123",
            "zipCode": "78320"
        }
    }
}
```

--------------------------------

### Form Initialization and Registration Action Creators

Source: https://redux-form.com/8.3.0/docs/api/ActionCreators

Initialize form data from external sources and register fields dynamically with these action creators.

```APIDOC
## Form Initialization and Registration Action Creators

### `initialize(form: String, data: Object, [keepDirty:boolean], [options:{keepDirty:boolean, keepSubmitSucceeded:boolean, updateUnregisteredFields:boolean, keepValues:boolean}])`

> Sets the initial values in the form with which future data values will be compared to calculate `dirty` and `pristine`. The `data` parameter may contain deep nested array and object values that match the shape of your form fields.
> If the `keepDirty` parameter is `true`, the values of currently dirty fields will be retained to avoid overwriting user edits. (`keepDirty` can appear as either the third argument, or a property of `options` as the 3rd or 4th argument, for the sake of backwards compatibility).
> If the `keepSubmitSucceeded` parameter is `true`, it will not clear the `submitSucceeded` flag if it is set.
> If the `updateUnregisteredFields` parameter is `true`, it will update every initialValue if still pristine instead of only registered fields. Highly recommended, defaults to false because of non-breaking backwards compatibility.
> If the `keepValues` parameter is `true`, it will keep the old values and initial values.

### `registerField(form: String, name: String, type: String)`

> Registers a field with the form. The `type` parameter can be `Field` or `FieldArray`.
```

--------------------------------

### Utility Functions and Selectors

Source: https://redux-form.com/8.3.0/docs/api

Documentation for utility functions like `formValueSelector` and the `SubmissionError` class.

```APIDOC
## `formValueSelector(form: String, [getFormState: Function])`

### Description
Creates a selector for use in `connect()`ing to form values in the Redux store.

### Method
Selector Creator

### Endpoint
N/A (Function)

### Parameters
- **form** (String) - Required - The name of the form.
- **getFormState** (Function) - Optional - A function to get the form state from the Redux store.

### Request Example
```javascript
import { createSelector } from 'reselect';
import { formValueSelector } from 'redux-form';

const selector = formValueSelector('myForm');

const mapStateToProps = createSelector(
  state => state.form,
  (formState) => {
    return {
      someValue: selector(formState, 'someField')
    };
  }
);
```

## `SubmissionError`

### Description
A special error type for returning submit validation errors.

### Method
Error Class

### Endpoint
N/A (Class)

### Parameters
- **errors** (Object) - Required - An object containing submission errors, where keys are field names.

### Request Example
```javascript
import { SubmissionError } from 'redux-form';

throw new SubmissionError({
  _error: 'Login failed!',
  username: 'Username is required.',
  password: 'Password is too short.'
});
```
```

--------------------------------

### Redux-Form v6 FieldArray Component Example

Source: https://redux-form.com/8.3.0/docs/MigrationGuide

This snippet demonstrates how to implement a dynamic list of awards using Redux-Form's FieldArray component in v6. It allows users to add and display multiple award fields.

```javascript
const renderAwards = ({ fields }) =>
  <div>
    <ul>
      {fields.map((name, index) => <li key={index}>
        <label htmlFor={name}>Award #{index + 1}</label>
        <Field name={name} type="text" component="input"/>
      </li>)}
    </ul>
    <button onClick={() => fields.push()}>Add Award</button>
  </div>

render() {
  return (
    <div>
      <FieldArray name="awards" component={renderAwards}/>
    </div>
  )
}
```

--------------------------------

### Redux Form Submission Handling in React

Source: https://redux-form.com/8.3.0/docs/GettingStarted

Shows how to handle form submission in a React component using Redux Form. The parent component provides an `onSubmit` prop to the `ContactForm`. When the form is submitted, the `submit` function is called with the form values, which are then logged to the console.

```jsx
import React from 'react'
import ContactForm from './ContactForm'

class ContactPage extends React.Component {
  submit = values => {
    // print the form values to the console
    console.log(values)
  }
  render() {
    return <ContactForm onSubmit={this.submit} />
  }
}
```

--------------------------------

### Form Components

Source: https://redux-form.com/8.3.0/docs/api

Documentation for essential Redux Form components like Field, Fields, FieldArray, FormSection, and Form.

```APIDOC
## `Field`

### Description
The component needed to connect any input to `redux-form`.

### Method
Component

### Endpoint
N/A (React Component)

### Parameters
- **name** (String) - Required - The name of the field.
- **component** (ReactComponent | String) - Required - The component to render for the input.
- **props** (Object) - Optional - Additional props to pass to the rendered component.

### Request Example
```javascript
import { Field } from 'redux-form';

<Field name="firstName" component="input" type="text" />
```

## `Fields`

### Description
The component that can connect multiple inputs to `redux-form`.

### Method
Component

### Endpoint
N/A (React Component)

### Parameters
- **names** (Array<String>) - Required - An array of field names to connect.
- **component** (ReactComponent | String) - Required - The component to render for the inputs.

### Request Example
```javascript
import { Fields } from 'redux-form';

const renderFields = ({ fields }) => (
  <div>
    {fields.map(name => <input key={name} {...fields[name]} />)}
  </div>
);

<Fields names={['field1', 'field2']} component={renderFields} />
```

## `FieldArray`

### Description
The component needed to render an array of fields.

### Method
Component

### Endpoint
N/A (React Component)

### Parameters
- **name** (String) - Required - The name of the field array.
- **component** (ReactComponent | String) - Required - The component to render for the field array.

### Request Example
```javascript
import { FieldArray } from 'redux-form';

const renderMembers = ({ fields }) => (
  <ul>
    {fields.map((member, index) => (
      <li key={index}>
        <Field name={`${member}.firstName`} component="input" type="text" />
        <button type="button" onClick={() => fields.remove(index)}>Remove</button>
      </li>
    ))}
    <button type="button" onClick={() => fields.push()}>Add Member</button>
  </ul>
);

<FieldArray name="members" component={renderMembers} />
```

## `FormSection`

### Description
The component needed to prefix the names of a group of fields.

### Method
Component

### Endpoint
N/A (React Component)

### Parameters
- **name** (String) - Required - The name of the form section.

### Request Example
```javascript
import { Field, FormSection } from 'redux-form';

<FormSection name="user">
  <Field name="firstName" component="input" type="text" />
  <Field name="lastName" component="input" type="text" />
</FormSection>
```

## `Form`

### Description
A simple wrapper for the React `<form>` component that allows the surrounding `redux-form`-decorated component to trigger its `onSubmit` function.

### Method
Component

### Endpoint
N/A (React Component)

### Parameters
None directly, it passes through props to the underlying form element.

### Request Example
```javascript
import { Form } from 'redux-form';

<Form onSubmit={props.handleSubmit}>
  {/* form fields */}
</Form>
```
```

--------------------------------

### Redux Form Contact Form with Field Components

Source: https://redux-form.com/8.3.0/docs/GettingStarted

A complete React component demonstrating a contact form using Redux Form's `Field` and `reduxForm` HOC. It includes fields for first name, last name, and email, connecting each input to the Redux store. The form is configured with a unique name 'contact'.

```jsx
import React from 'react'
import { Field, reduxForm } from 'redux-form'

let ContactForm = props => {
  const { handleSubmit } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      <div>
        <label htmlFor="lastName">Last Name</label>
        <Field name="lastName" component="input" type="text" />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <Field name="email" component="input" type="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

ContactForm = reduxForm({
  // a unique name for the form
  form: 'contact'
})(ContactForm)

export default ContactForm
```

--------------------------------

### Connecting Redux Form to Redux Store

Source: https://redux-form.com/8.3.0/docs/faq/HandleVsOn

This code demonstrates how to connect a `SearchBar` component (managed by Redux Form) to the Redux store. It uses `react-redux`'s `connect` to map `handleSearchSubmit` to a Redux action, which is then passed as the `onSubmit` prop to `SearchBar`. This allows form values to be dispatched.

```jsx
import React from 'react'
import { connect } from 'react-redux'
import SearchBar from './SearchBar'

let SearchContainer = ({ handleSearchSubmit }) => (
  <SearchBar onSubmit={values => handleSearchSubmit(values.search)} />
)

const mapDispatchToProps = dispatch => ({
  handleSearchSubmit: value =>
    dispatch({ type: 'SEARCH_CONTAINER_SUBMIT', payload: value })
})

export default connect(
  null,
  mapDispatchToProps
)(SearchContainer)
```

--------------------------------

### Redux Form Configuration Options

Source: https://redux-form.com/8.3.0/docs/api/ReduxForm

This section details the various configuration options that can be passed to the Redux Form decorator to customize its behavior.

```APIDOC
## Redux Form Configuration Options

### Description
Configuration options to customize Redux Form's behavior, including field updates, submission handling, and component rendering.

### Method
N/A (Configuration options applied via decorator)

### Endpoint
N/A

### Parameters
#### `updateUnregisteredFields` (boolean) [optional]
Used in combination with `keepDirtyOnReinitialize`. Will update every initialValue which is still pristine. Normally only registered Fields will be updated. In most cases, this option should be set to `true` to work as expected and avoid edge cases. It defaults to `false` because of non-breaking backwards compatibility.

#### `onChange` (Function) [optional]
A callback function that will be called with all the form values any time any of the form values change.
- `values` (Object) - The changed field values in the form of `{ field1: 'value1', field2: 'value2' }`.
- `dispatch` (Function) - The Redux `dispatch` function.
- `props` (Object) - The props passed into your decorated component.
- `previousValues` (Object) - The previous field values in the form of `{ field1: 'value1', field2: 'value2' }`.

#### `onSubmit` (Function) [optional]
The function to call with the form data when the `handleSubmit()` is fired from within the form component. If you do not specify it as a prop here, you must pass it as a parameter to `handleSubmit()` inside your form component.
If your `onSubmit` function returns a promise, the `submitting` property will be set to `true` until the promise has been resolved or rejected. If it is rejected with a `redux-form` `SubmissionError` containing errors in the form `{ field1: 'error', field2: 'error' }` then the submission errors will be added to each field (to the `error` prop) just like async validation errors are. If there is an error that is not specific to any field, but applicable to the entire form, you may pass that as if it were the error for a field called `_error`, and it will be given as the `error` prop.
- `values` (Object) - The field values in the form of `{ field1: 'value1', field2: 'value2' }`.
- `dispatch` (Function) - The Redux `dispatch` function.
- `props` (Object) - The props passed into your decorated component.

#### `onSubmitFail` (Function) [optional]
A callback function that will be called when a submission fails for whatever reason.
- `errors` (Object) - The errors that caused the submission to fail.
- `dispatch` (Function) - The Redux `dispatch` function.
- `submitError` (Error) - The error object that caused the submission to fail. If `errors` is set this will be most likely a `SubmissionError`, otherwise it can be any error or null.
- `props` (Object) - The props passed into your decorated component.

#### `onSubmitSuccess` (Function) [optional]
A callback function that will be called when a submission succeeds.
- `result` (Object) - Any result that `onSubmit` has returned.
- `dispatch` (Function) - The Redux `dispatch` function.
- `props` (Object) - The props passed into your decorated component.

#### `propNamespace` (String) [optional]
If specified, all the props normally passed into your decorated component directly will be passed under the key specified. Useful if using other decorator libraries on the same component to avoid prop namespace collisions.

#### `pure` (boolean) [optional]
If true, implements `shouldComponentUpdate` and compares _only the Redux-connected props_ that are needed to manage the form state, preventing unnecessary updates, assuming that the component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Defaults to `true`.
Similar to the `pure` parameter in `react-redux`'s `connect()` API.

### Request Example
N/A

### Response
N/A

```

--------------------------------

### Usage of formValues() with Field Name

Source: https://redux-form.com/8.3.0/docs/api/FormValues

Example of using the formValues decorator to pass a specific form value ('withVat') as a prop to a component (MyItemizedList).

```javascript
const ItemList = formValues('withVat')(MyItemizedList)
```

--------------------------------

### Import formValues() - ES6

Source: https://redux-form.com/8.3.0/docs/api/FormValues

Demonstrates how to import the formValues decorator using ES6 module syntax (import).

```javascript
import { formValues } from 'redux-form' // ES6
```

--------------------------------

### Import reduxForm() in ES5 and ES6

Source: https://redux-form.com/8.3.0/docs/api/ReduxForm

Demonstrates how to import the `reduxForm` function from the 'redux-form' library using both ES5 (CommonJS) and ES6 (ESM) module syntaxes.

```javascript
var reduxForm = require('redux-form').reduxForm // ES5
```

```javascript
import { reduxForm } from 'redux-form' // ES6
```

--------------------------------

### Usage of formValues() with Options Object

Source: https://redux-form.com/8.3.0/docs/api/FormValues

Example of using the formValues decorator with an options object to map a form value ('withVat') to a specific prop name ('showVat') on the target component (MyItemizedList).

```javascript
const ItemList = formValues({ showVat: 'withVat' })(MyItemizedList)
```

--------------------------------

### Usage of formValues() with Dynamic Field Name Function

Source: https://redux-form.com/8.3.0/docs/api/FormValues

Example of using the formValues decorator with a function that dynamically determines the form field name ('formValueName') to be passed as a prop to the target component (MyItemizedList).

```javascript
const ItemList = formValues(props => props.formValueName)(MyItemizedList)
```

--------------------------------

### Redux Form Action Creators

Source: https://redux-form.com/8.3.0/docs/api/actioncreators

Reference for all available action creators in Redux Form, including their purpose, parameters, and usage.

```APIDOC
## Redux Form Action Creators API

Redux Form exports all of its internal action creators, allowing you to dispatch actions directly to manage form state.

### `arrayInsert(form: String, field: String, index: Number, value: any)`

**Description:** Inserts an item into a field array at the specified index.

### `arrayMove(form: String, field: String, from: Number, to: Number)`

**Description:** Moves an item from one index in the array to another. This operation effectively removes the item from the `from` index and inserts it at the `to` index, shifting other items as necessary.

### `arrayPop(form: String, field: String)`

**Description:** Removes an item from the end of a field array.

### `arrayPush(form: String, field: String, value: any)`

**Description:** Appends an item to the end of a field array.

### `arrayRemove(form: String, field: String, index: Number)`

**Description:** Removes an item at the specified index from a field array.

### `arrayRemoveAll(form: String, field: String)`

**Description:** Removes all items from the specified field array.

### `arrayShift(form: String, field: String)`

**Description:** Removes an item from the beginning of a field array.

### `arraySplice(form: String, field: String, index: Number, removeNum: Number, value: any)`

**Description:** Advanced usage. Inserts and/or removes items from a field array, similar to JavaScript's `Array.prototype.splice`.

### `arraySwap(form: String, field: String, indexA: Number, indexB: Number)`

**Description:** Swaps two items at the specified indexes within a field array.

### `arrayUnshift(form: String, field: String, value: any)`

**Description:** Inserts an item at the beginning of a field array.

### `autofill(form: String, field: String, value: String)`

**Description:** Saves the provided value to the specified field and marks it as `autofilled`.

### `blur(form: String, field: String, value: any)`

**Description:** Saves the provided value to the specified field, simulating a blur event.

### `change(form: String, field: String, value: any)`

**Description:** Saves the provided value to the specified field, simulating a change event.

### `clearAsyncError(form: String, field: String)`

**Description:** Removes any `asyncErrors` associated with the specified field.

### `clearSubmitErrors(form: String)`

**Description:** Removes `submitErrors` and the top-level `error` from the specified form.

### `clearFields(form: String, keepTouched: boolean, persistentSubmitErrors: boolean, ...fields: String)`

**Description:** Clears values for the specified fields within a form. Resets to initial values if they exist. Can optionally preserve `touched` state and `persistentSubmitErrors`.

### `destroy(...forms: String)`

**Description:** Destroys the specified forms, removing all associated state.

### `focus(form: String, field: String)`

**Description:** Marks the specified field as `active` and `visited`, simulating a focus event.

### `initialize(form: String, data: Object, [keepDirty: boolean], [options: { keepDirty: boolean, keepSubmitSucceeded: boolean, updateUnregisteredFields: boolean, keepValues: boolean }])`

**Description:** Sets the initial values for a form. `data` can be deeply nested. Optional parameters control whether dirty fields are kept, submit succeeded flags are cleared, unregistered fields are updated, and existing values are retained.

### `registerField(form: String, name: String, type: String)`

**Description:** Registers a field with the form. The `type` can be 'Field' or 'FieldArray'.

```

--------------------------------

### Redux Form FieldArrayProps Type Definition

Source: https://redux-form.com/8.3.0/docs/flow

Provides an example of using FieldArrayProps to type the props for a component that renders a dynamic array of fields, demonstrating how to map over and render fields within the array.

```javascript
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}/>
```

--------------------------------

### Instance Reference

Source: https://redux-form.com/8.3.0/docs/api/reduxform

Access the wrapped component instance, primarily for testing purposes.

```APIDOC
## Instance Reference

### Description
This property provides a direct reference to the underlying React component instance, which is particularly useful for advanced use cases and testing.

### Property

- **`wrappedInstance`** (ReactElement) - A reference to the instance of the component you decorated with `reduxForm()`.

### Request Example
```javascript
const wrappedComponent = form.wrappedInstance;
// You can now call methods or access properties of the wrapped component instance
```

### Response Example
(This is a reference, so an example shows how it's accessed.)
```javascript
// Assume 'form' is your reduxForm instance
const componentInstance = form.wrappedInstance;
// componentInstance will hold the reference to the decorated React component.
```
```

--------------------------------

### Import formValues() - ES5

Source: https://redux-form.com/8.3.0/docs/api/FormValues

Demonstrates how to import the formValues decorator using CommonJS syntax (require) in ES5 environments.

```javascript
var formValues = require('redux-form').formValues // ES5
```

--------------------------------

### Redux Form Integration with React Redux

Source: https://redux-form.com/8.3.0/docs/faq/HowToConnect

This snippet shows how to connect a React component using Redux Form to the Redux store. It utilizes `connect` from `react-redux` to define how to retrieve state and dispatch actions, and then wraps the component with `reduxForm` for form-specific functionalities. Dependencies include `react`, `redux-form`, and `react-redux`. The output is a connected React component ready for form management.

```javascript
import React, { Component } from 'react'
import { reduxForm } from 'redux-form'
import { connect } from 'react-redux'

class Example extends React.Component {
  // ...
}

const mapStateToProps = state => ({
  // ...
})

const mapDispatchToProps = dispatch => ({
  // ...
})

Example = connect(
  mapStateToProps,
  mapDispatchToProps
)(Example)

export default reduxForm({
  form: 'example' // a unique name for this form
})(Example)

```

--------------------------------

### Redux Form Basic SearchBar Component

Source: https://redux-form.com/8.3.0/docs/faq/HandleVsOn

This React component, `SearchBar`, is configured with Redux Form. It utilizes the `reduxForm` higher-order component and includes a `Field` for input. The `handleSubmit` prop from Redux Form is passed to the form's `onSubmit` event.

```jsx
import React from 'react'
import { reduxForm, Field } from 'redux-form'

const SearchBar = ({ handleChange, handleSubmit, value }) => (
  <form onSubmit={handleSubmit}>
    <div>
      <Field
        component="input"
        name="search"
        onChange={handleChange}
        type="text"
        value={value}
      />
    </div>
  </form>
)
export default reduxForm({ form: 'SearchBar' })(SearchBar)
```

--------------------------------

### Handle Submission Errors in onSubmit

Source: https://redux-form.com/8.3.0/docs/api/SubmissionError

This example illustrates how to use SubmissionError within the onSubmit function of a Redux Form component. It shows catching AJAX errors and throwing a SubmissionError with validation errors or handling other communication issues.

```javascript
<MyForm
  onSubmit={values =>
    ajax
      .send(values) // however you send data to your server...
      .catch(error => {
        // how you pass server-side validation errors back is up to you
        if (error.validationErrors) {
          throw new SubmissionError(error.validationErrors)
        } else {
          // what you do about other communication errors is up to you
        }
      })
  }
/>
```

--------------------------------

### Usage of formValues() with Dynamic Options Object Function

Source: https://redux-form.com/8.3.0/docs/api/FormValues

Example of using the formValues decorator with a function that dynamically returns an options object to map form values to component props. Here, 'props.formValueName' is mapped to the 'showVat' prop on MyItemizedList.

```javascript
const ItemList = formValues(props => ({ showVat: props.formValueName }))(
  MyItemizedList
)
```

--------------------------------

### Form Reset API

Source: https://redux-form.com/8.3.0/docs/api/ActionCreators

Provides actions to reset form values to their initialized state or to a specific section.

```APIDOC
## `reset(form:String)`

### Description
Resets the values in the form back to the values passed in with the most recent `initialize` action.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
reset('myForm');
```

### Response
N/A

## `resetSection(form:String, ...sections:String)`

### Description
Resets the values in the form sections back to the values passed in with the most recent `initialize` action.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
resetSection('myForm', 'section1', 'section2');
```

### Response
N/A
```

--------------------------------

### Importing formValues() in ES5 and ES6

Source: https://redux-form.com/8.3.0/docs/api/formvalues

Demonstrates how to import the formValues decorator from the 'redux-form' library using both CommonJS (ES5) and ES6 import syntax.

```javascript
var formValues = require('redux-form').formValues // ES5
```

```javascript
import { formValues } from 'redux-form' // ES6
```

--------------------------------

### Redux Form Field Array Handling v5

Source: https://redux-form.com/8.3.0/docs/migrationguide

Shows how to handle arrays of fields in Redux Form v5. The `fields` prop provided access to array methods like `addField` and iteration over field objects.

```javascript
render() {
  const { fields: { awards } } = this.props;
  return (
    <div>
      <ul>
        {awards.map((award, index) => <li key={index}>
          <label htmlFor="award">Award #{index + 1}</label>
          <input type="text" {...award.input}/>
        </li>)}
      </ul>
      <button onClick={() => awards.addField()}>Add Award</button>
    </div>
  )
}
```

--------------------------------

### Redux Form Submission Error Handling v5 vs v6

Source: https://redux-form.com/8.3.0/docs/migrationguide

Compares the submission error handling between Redux Form v5 and v6. In v6, submission errors must be wrapped in a SubmissionError object to differentiate them from other types of errors.

```javascript
;<MyForm
  onSubmit={values =>
    ajax
      .send(values)
      .catch(error => {
        if (error.validationErrors) {
          return Promise.reject(error.validationErrors)
        } else {
          reportServerError(error)
        }
      })
  }
/>
```

```javascript
;<MyForm
  onSubmit={values =>
    ajax.send(values).catch(error => {
      if (error.validationErrors) {
        throw new SubmissionError(error.validationErrors) // <----- only difference
      } else {
        reportServerError(error)
      }
    })
  }
/>
```

--------------------------------

### Using FormSection for Nested Forms in React

Source: https://redux-form.com/8.3.0/docs/api/formsection

Demonstrates how to use the FormSection component to create reusable form sections like 'Address' and 'Party', which are then composed within a main 'OrderForm'. This example shows nesting FormSections to build complex form structures.

```javascript
class Address extends React.Component {
    render() {
        return <div>
            <Field name="streetName" component="input" type="text"/>
            <Field name="number" component="input" type="text"/>
            <Field name="zipCode" component="input" type="text"/>
        </div>
    }
}

class Party extends React.Component {
    render() {
        return <div>
            <Field name="givenName" component="input" type="text"/>
            <Field name="middleName" component="input" type="text"/>
            <Field name="surname" component="input" type="text"/>
            <FormSection name="address">
                <Address/>
            </FormSection>
        </div>
    }
}

class OrderForm extends React.Component {
    render() {
        return <form onsubmit={...}>
            <FormSection name="buyer">
                <Party/>
            </FormSection>
            <FormSection name="recipient">
                <Party/>
            </FormSection>
        </form>
    }
}
//don't forget to connect OrderForm with reduxForm()
```

--------------------------------

### Reducer API

Source: https://redux-form.com/8.3.0/docs/api

Details on the Redux Form reducer and its plugin functionality for extending form state management.

```APIDOC
## `reducer`

### Description
The form reducer. Should be mounted to your Redux state at the key `form`.

### Method
Reducer

### Endpoint
N/A (Redux Reducer)

### Parameters
None

### Request Example
```javascript
import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer,
  // other reducers...
});

const store = createStore(rootReducer);
```

### Response
#### Success Response (N/A - Reducer)
N/A

#### Response Example
N/A

## `reducer.plugin(Object<String, Function>)`

### Description
Returns a form reducer that will also pass each action through additional reducers specified.

### Method
Reducer Plugin

### Endpoint
N/A (Reducer Method)

### Parameters
- **plugin** (Object) - An object where keys are plugin names and values are reducer functions.

### Request Example
```javascript
import { reducer as formReducer } from 'redux-form';

const myPlugin = (state, action) => {
  // custom logic
  return state;
};

const extendedFormReducer = formReducer.plugin({
  myPluginName: myPlugin
});
```

### Response
#### Success Response (N/A - Reducer Method)
Returns a new reducer function.

#### Response Example
N/A
```

--------------------------------

### Field State and Value Action Creators

Source: https://redux-form.com/8.3.0/docs/api/ActionCreators

These action creators allow you to directly manipulate the state and values of individual form fields, including autofill, blur, and change events.

```APIDOC
## Field State and Value Action Creators

### `autofill(form: String, field: String, value: String)`

> Saves the value to the field and sets its `autofilled` property to `true`.

### `blur(form: String, field: String, value: any)`

> Saves the value to the field.

### `change(form: String, field: String, value: any)`

> Saves the value to the field.
```

--------------------------------

### Flow Type for FieldArrayProps in Redux Form

Source: https://redux-form.com/8.3.0/docs/Flow

Provides an example of using `FieldArrayProps` to correctly type the props for custom components that manage arrays of fields in Redux Form. This ensures type safety when dynamically adding, removing, or rendering elements within a field array.

```javascript
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}/>
```
Tokens:
Raw