Initial Form Values with redux-form

Caveat emptor: I’m currently using 3.0.6 of redux-form. As with most things on the bleeding edge, this post will probably be irrelevant in a few months (or weeks).

There’re a few reasons one may need to have form values initialized upon render - edit forms, or default select values.

In vanilla HTML, one would simply do:

<select>
  <option value="apple">Apple</option>
  <option value="orange" selected>Orange</option>
</select>

It’s a little different in JSX. In JSX, Facebook recommends the following way.

To set initial form values in redux-form that are actually initialized in the Redux state, one needs to pass in an object with a initialValues main key and field key-value pairs as props to the redux-form Form component:

import { React, Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import { reduxForm } from 'redux-form'
import { registerPerson } from 'actions/coolStuff'

@connect(null, dispatch => ({
  registerPerson: bindActionCreators(registerPerson, dispatch)
}))
export default class ExampleComponent extends Component {
  render() {
    const myInitialValues = {
      initialValues: {
        name: 'John Doe',
        age: 42,
        fruitPreference: 'apples'
      }
    }
    return (
      <div>
        <h1>Check out my cool form!</h1>
        <CoolForm  {...myInitialValues} onSubmit={(fields) => {this.props.registerPerson(fields)}} />
      </div>
    )
  }
}

@reduxForm({
  form: 'exampleForm',
  fields: ['name', 'age', 'fruitPreference']
})
class CoolForm extends Component {
  render() {
    const { fields: {name, age, fruitPreference}, handleSubmit } = this.props
    return (
      <form onSubmit={handleSubmit}>
        <label>Name</label>
        <input type='text' {...name} />
        <label>Age</label>
        <input type='text' {...age} />
        <label>Do you prefer apples or oranges?</label>
        <select {...fruitPreference}>
          <option value="apples">Apples</option>
          <option value="oranges">Oranges</option>
        </select>
        <button type='submit' onClick={handleSubmit}>Submit</button>
      </form>
    )
  }
}

If all goes well, you’ll see the initial values being loaded into Redux state upon initialization, which can be submitted (to handleSubmit) right away: