Redux form - sync validation example

Leff Published at Dev

Leff

I am going through the redux form documentation. I have come across this example. What I am wondering is where do we get from handleSubmit, pristine, reset, submitting, when deconstructing the props object in the SyncValidationForm:

const SyncValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="username" type="text" component={renderField} label="Username"/>
      <Field name="email" type="email" component={renderField} label="Email"/>
      <Field name="age" type="number" component={renderField} label="Age"/>
      <div>
        <button type="submit" disabled={submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

Sinc, from what I could see we only pass the onSubmit property in the index.js:

<SyncValidationForm onSubmit={showResults} />

Peter Riesz

In the example SyncValidationForm is exported as a reduxForm:

export default reduxForm({
  form: 'syncValidation', // a unique identifier for this form
  validate, // <--- validation function given to redux-form
  warn // <--- warning function given to redux-form
})(SyncValidationForm)

This makes it a Higher Order Component similar to redux connect injecting the extra form props.

Collected from the Internet

Please contact [email protected] to delete if infringement.