Redux Form Example- https://redux-form.com/7.3.0/

form-helper.js

import React from 'react';
import validator from 'validator';
import uniqid from 'uniqid'

// Form field components
export const renderInputField = (props) => {
  let {
    input,
    label,
    type,
    appendLabel,
    placeholder,
    componentClass,
    fieldClass,
    meta: { touched, error, warning }
  } = props

  let fieldId = uniqid('field-')
  let labelHtml = ''
  if (label) {
    labelHtml = <label htmlFor={fieldId}>{label}</label>
  } 

  return (
    <div className={componentClass}>
      {!appendLabel && labelHtml}
      <input
        {...input}
        id={fieldId}
        className={fieldClass}
        placeholder={placeholder}
        type={type} />
      {appendLabel && labelHtml}
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  )
};

// Different validators
export const required = value => {
  if (!value) {
    // We can return string or jsx as the 'error' prop for the validated Component
    return <div className="form-error is-visible">This field is required.</div>;
  }
};

export const email = value => {
  if (!validator.isEmail(value)) {
    return <div className="form-error is-visible">{value} is not a valid email.</div>;
  }
};

SettingsForm.js

import React, { Component } from 'react';
import{
    Grid, Row, Col,
    FormGroup, ControlLabel
} from 'react-bootstrap';
import { Field, reduxForm } from 'redux-form'
import { renderInputField, required, email } from 'utils/form-helpers'

let SettingsForm = props => {
  const { handleSubmit, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <FormGroup>
        <ControlLabel>
            Email address
        </ControlLabel>
        <Field
          name="email"
          fieldClass='form-control'
          component={renderInputField}
          type="email"
          validate={[required, email]}
        />
      </FormGroup>
      <FormGroup>
        <ControlLabel>
            Password
        </ControlLabel>
        <Field
          name="password"
          fieldClass='form-control'
          component={renderInputField}
          validate={[required]}
          type="password"
        />
      </FormGroup>
      <FormGroup>
        <ControlLabel>
            Name
        </ControlLabel>
        <Field
          name="name"
          fieldClass='form-control'
          component={renderInputField}
          validate={[required]}
          type="text"
        />
      </FormGroup>
      <FormGroup>
        <ControlLabel>
            Brand Name
        </ControlLabel>
        <Field
          name="brandName"
          fieldClass='form-control'
          component={renderInputField}
          validate={[required]}
          type="text"
        />
      </FormGroup>
      <FormGroup>
        <Button
          bsStyle="info"
          fill
          type="submit"
          disabled={submitting}
        >
          Save
        </Button>
      </FormGroup>

    </form>
  )
};

SettingsForm = reduxForm({
  form: 'settings',
  initialValues: {}
})(SettingsForm)

export default SettingsForm;

SettingsPage.js

import React, { Component } from 'react';
import SettingsForm from './SettingsForm'

class SettingsPage extends Component {

  constructor(props) {
    super(props);
  }
  saveSettings(values) {
    // Handle form submit
    // Save form fields  
  }
  render() {
    return (
      <Grid fluid>
        <Row>
          <Col md={12}>
            <SettingsForm onSubmit={this.saveSettings} />
          </Col>
        </Row>
      </Grid>
    );
  }
}
export default SettingsPage;