formValueSelector(form:String, [getFormState:Function])

View source on GitHub

A "selector" API to make it easier to connect() to form values. formValueSelector creates a selector function for your form that can be used with your field names.


var formValueSelector = require('redux-form').formValueSelector;  // ES5

import { formValueSelector } from 'redux-form';  // ES6


form : String [required]

The name of the form you are connecting to. Must be the same as the form config value you gave to reduxForm().

getFormState : Function [optional]

If you are using the getFormState() config parameter to keep the redux-form reducer at a place in your Redux store other than state.form, you must also provide the same function here to get the slice of Redux store where the redux-form reducer is mounted. Defaults to state => state.form.


The function returned from formValueSelector() has the following structure:

selector(state:Object, ...field:String)

state : Object [required]

The global Redux state given to mapStateToProps.

...field : String [required]

The field, or fields, you want to select. If you provide only one field name, the function will return the value of that field. If you provide more than one field name, it will return an object mapping fields to values. If your field are "deep" (i.e. has one or more . in the name), the structure you get back will also be deep. e.g. If your fields are 'a.b' and 'a.c', the resulting structure will be { a: { b: 'bValue', c: 'cValue' } }.


The first thing you do is create a selector for your form name.

const selector = formValueSelector('myFormName')

Then, there are several ways to use the selector that was created.

1. Select fields individually

  state => ({
    firstValue: selector(state, 'first'),
    secondValue: selector(state, 'second')

2. Select multiple fields as a group

  state => {
    const { first, second } = selector(state, 'first', 'second')
    // do some calculation
    return {
      sum: first + second

3. Select multiple fields as a group into a grouped prop

  state => ({
    myValues: selector(state, 'first', 'second')

4. Use the selector as mapStateToProps

If you don't need any other props from the state, the selector itself works just fine as mapStateToProps.

  state => selector(state, 'first', 'second')


See the Selecting Form Values example.