This is an example of a form in redux in which all the state is kept within the redux store. All the components are pure "dumb" components.

Things to notice:

  • No validation errors are shown initially.
  • Validation errors are only shown onBlur
  • Validation errors are hidden onChange when the error is rectified
  • valid, invalid, pristine and dirty flags are passed with each change
  • Except when you submit the form, in which case they are shown for all invalid fields.
  • If you click the Initialize Form button, the form will be prepopupated with some values and the pristine and dirty flags will be based on those values.

Pardon the use of window.alert(), but I wanted to keep this component stateless.

The circles to the left of the inputs correspond to flags provided by redux-form: Touched, Visited, Active, and Dirty.

Props from redux-form

Active Field
This is an info bar This came from the api serverThu May 28 2020 02:24:40 GMT+0000 (UTC)
Have questions? Ask for help on Github or in the #react-redux-universal Discord channel.