Redux Form Starter

Start fiddle for all your demo needs.

by Allie Yu

HTML

<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.6/react-redux.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.6.2/redux-form.js"></script>
<main></main>

Babel + JSX

// BEGIN SETUP
const { Component } = React;
const {reduxForm, FormSection, FieldArray, Field, Form, reducer: formReducer, submit, isSubmitting, isValid, isPristine } = ReduxForm;
const { createStore, combineReducers } = Redux;
const { Provider, connect } = ReactRedux;
const reducer = combineReducers({ 
	form: formReducer 
});
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
// END SETUP

// -----

// BEGIN EXAMPLE
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>
)
const WizardFormFirstPage = reduxForm({
  form: 'wizard',                 // <------ same form name
  destroyOnUnmount: false,        // <------ preserve form data
  forceUnregisterOnUnmount: true,  // <------ unregister fields on unmount
  validate: (values) => {
    const errors = {}
    if (!values.firstName) {
      errors.firstName = 'Required'
    }
    if (!values.lastName) {
      errors.lastName = 'Required'
    }
  	return errors
  }
})((props) => {
  const { handleSubmit } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="firstName" type="text" component={renderField} label="First Name"/>
      <Field name="lastName" type="text" component={renderField} label="Last Name"/>
    </form>
  ) 
})

const renderError = ({ meta: { touched, error } }) => touched && error ?
  <span>{error}</span> : false
@reduxForm({
  form: 'wizard',  //Form name is same
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true,  // <------ unregister fields on unmount
  validate: (values) => {
    const errors = {}
    if (!values.sex) {
      errors.sex = 'Required'
    }
  	return errors
  }
})

class WizardFormSecondPage extends React.Component {
	handleSubmit = (data) => {
  	this.props.onSubmit(data)
	}
	render() {
    const {...