React + Redux Form — Two ways to add initial values

Because Redux aka Re(ducks). Lol. Bad joke, sorry not sorry.

My work projects rely heavily on the use of Redux Form (paired with React). A problem I struggled with was trying to figure out how to pre-populate my form with initial values. It wasn’t so straightforward as the form was nested in a customized dialogue component and I could not use the initialValues prop like so:

If you are in a similar position or just want to figure out various ways to utilize initial values in your Redux form, keep reading on!

Let’s use a simple form as an example:

Simple Redux Form with a single “Name” field

1) Pass initialValues prop in form instance component

We pass a prop called into the form instance component and the value is an object with the keys being the name of the field and the values being the initial value which we want to add.

<SimpleForm 
onSubmit={this.handleSubmit}
initialValues={{name: "Sherlynn"}}
/>

Another way would be to store the values in a variable. This is useful especially when there are many form fields.

var initialName = {name: "Sherlynn" }<SimpleForm 
onSubmit={this.handleSubmit}
initialValues={initialName}
/>

2) Add initialValues prop in mapStateToProps

You can use the initalValues prop in mapStateToProps.

  1. Convert your form to a React Component
  2. Import from
  3. Add prop in and you can retrieve from the redux store
  4. To pass the props into the redux form, we use the function (Line 34 onwards)
  5. Add When set to true, the form will reinitialize every time the initialValues prop changes

That is it! Refresh the app and you should see the initial values appear on your Redux form field.

Software Developer at @thoughtworks | Marathon Runner | Ex-Pharmacist Writing on Coding, Technology and Running

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store