redux-form/redux-form v6.0.0-rc.4

on GitHub

I really wanted to release v6.0.0 in July, especially since Redux Form's birthday was July 31, one year after the initial commit on July 31, 2015. 🎂🎉

However, some new features and breaking changes appeared, and I'd feel more comfortable if they were released for a week as an RC to ensure a lack of bugs before pulling the trigger on the release.

Bug Fixes

• Fixed drag and drop bug in IE. #1373 #1088
• Removed Array.findIndex() polyfill. #1412 #1326 (IE again 😡)
• Fixed quirky bug when reading values from events. #1369 #1355
• Added missing array action creators to the propTypes list.

Features

• Added parse and format props to Field, giving much more control to how values are transformed when transported between the Redux Store and the input. #1412 This was always a feature that had been planned for v6. See: Field and Value Lifecycle
• Added a set of selectors for reading form state from any connect()ed component. See: Selectors

⚠ Breaking Change ⚠

It came to my attention that my initial attempt at resolving the React v15.2.0 prop warning problem in v6.0.0-rc.2 was horribly flawed. A poll was conducted on #1425, and a relatively clear winner (not one of my ideas - 🍻 @kristian-puccio) was chosen. Please read that ticket for all the details, but I will summarize here.

The Field component is in charge of passing three types of props to its component:

• input props - Props meant specifically for the input element, like value, onBlur, etc.
• meta props - Metadata about your field that Redux Form is providing, like error, dirty, etc.
• custom props - Any other props that you have given to Field

The solution wrongheadedly decided in v6.0.0-rc.2 was to pass them to the component in the following structure:

{
  input: {
    ...input,
    ...custom,
  },
  ...meta
}

...such that any additional props that you passed would be lumped in with the ones that redux-form provides for your input. This was dumb.

Now, they are passed as such:

{
  input,
  meta,
  ...custom
}

The two sets of special props that redux-form provides you are encapsulated in input and meta objects, and all the additional props that you pass will be in the root. So a typical renderField component might look a little something like this, with ES6 inline parameter destructuring:

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type}/>
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)
...
<Field name="username" type="text" component={renderField} label="Username"/>

Conclusion

I do not foresee any future breaking changes between now and release. As always, feedback is extremely welcome.