Difference between `normalize` and `parse` callbacks in redux-form

Question

The current redux-form documentation (version 6.5.0 at the time of this writing) mentions 2 callbacks for the Field object: normalize and parse.

Both descriptions sound pretty similar: They take the value entered by the user in an input field and transform it to a value stored in redux.

What's the difference between these 2 callbacks?

Answer 1

Essentially the two functions do exactly the same thing, i.e. take the value a user has input to the Field and transform it before it's stored in the redux store.

The differences lie in the flavor of these functions and the order in which they are called:

1. parse parses the string input value should convert it to the type you want to be stored the redux store, for example you parse a date string from a datepicker into a Date object
2. normalize is meant enforce certain formatting of input values in the redux store, for example ensuring that phone numbers are stored in a cohesive format

When it comes to the order in which these methods are called in the redux-form value lifecycle: parse is called before normalize, which means normalize is called with the parsed input value.

So in short, use parse to convert user input (usually in string form) to a type that suits your needs. Use normalize to enforce a specific input format on the user.

Answer 2

This is what the Value Lifecycle Hooks page tries to explain.