reduxForm.js

https://redux-form.com/7.4.2/examples/syncvalidation/ (link to docs) 



`must name reducer form. when importing Field must be capitol as it is a Component.
 1) reduxForm Functions the exact same as connect with redux. ex reduxForm(something)(something)
 @) have  reducer named form: `
 3) `When connected correctly the component gets a LOT of new props :)
 4) see prop list below `
import React from 'react'
import { Field, reduxForm } from 'redux-form';



class StreamCreate extends React.Component {
  renderInput(formProps) {
    return <input
      onChange={formProps.input.onChange}
      value={formProps.input.value}

      //Alternate Syntax is <input {...formProps.input }
    />
  }
  render() {
    return (
      <form>
        <Field name='title' component={this.renderInput} />
        <Field name="description" component={this.renderInput} />

      </form>
    )
  }
}

export default reduxForm({
  form: 'streamCreate'
})(StreamCreate)
 
 
 ##Second Version with submit 
 
import React from 'react'
import { Field, reduxForm } from 'redux-form';



class StreamCreate extends React.Component {
  //Destructering Field Input Object Magically Aquired by when Field calls This render function 
  //2nd argument is optional label added by user 
  //Wwe then add all the input methods on the input by using object spred op and copying entire object to Input 
  //Onsubmit is then called with the callback argument Onsubmit 
  renderInput({ input, label, meta }) {
    return (

      <div className="field">
        <label>{label}</label>
        <input {...input} />
        <div>{meta.error}</div>
      </div>
    );
  }
  onSubmit = (formValues) => {
    console.log(formValues);
  }
  render() {
    return (
      <form
        className='ui form'
        onSubmit={this.props.handleSubmit(this.onSubmit)}
      >
        <Field name='title' component={this.renderInput} label="Enter Title" />
        <Field name="description" component={this.renderInput} label="Enter Description" />
        <button className="ui button primary">Submit</button>
      </form>

    )
  }
}
const validate = (formValues) => {
  const errors = {};

  if (!formValues.title) {
    errors.title = 'you must enter a title'
  }
  if (!formValues.description) {
    errors.description = 'you must enter description'
  }
  return errors;
}

export default reduxForm({
  validate,
  form: 'streamCreate'
})(StreamCreate)
/* 
 
 
 
/* 
 When Function is called with Field Comp it gets additonal Props Such as onChange, Value (console.log(formProps) for full object)
  Field Give Magical Props to Render FUNCTION* 
*/



(props on form element when connected) 


Object
anyTouched: false
array: {insert: ƒ, move: ƒ, pop: ƒ, push: ƒ, remove: ƒ, …}
asyncValidate: ƒ (name, value, trigger)
asyncValidating: false
autofill: ƒ ()
blur: ƒ ()
change: ƒ ()
clearAsyncError: ƒ ()
clearFields: ƒ ()
clearSubmit: ƒ ()
clearSubmitErrors: ƒ ()
destroy: ƒ ()
dirty: false
dispatch: ƒ ()
error: undefined
form: "streamCreate"
handleSubmit: ƒ (submitOrEvent)
history: {length: 3, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …}
initialValues: undefined
initialize: ƒ ()
initialized: false
invalid: false
location: {pathname: "/streams/new", search: "", hash: "", state: undefined}
match: {path: "/streams/new", url: "/streams/new", isExact: true, params: {…}}
pristine: true
pure: true
reset: ƒ ()
resetSection: ƒ ()
staticContext: undefined
submit: ƒ ()
submitFailed: false
submitSucceeded: false
submitting: false
touch: ƒ ()
triggerSubmit: undefined
untouch: ƒ ()
valid: true
warning: undefined