import { formActions, mergeActionsToProps, formReducer } from '../dist/redux-pure-form.min.js';
 
class Example extends Component {
  render() {
    return (
      <form>
        <input
          type="text"
          // add field name attr
          name="user.name"
          // add field value attr
          value={this.props.user.name}
          // add handlers from form
          {...this.props.fieldAttrs}
        />
        <select
          value={this.props.user.gender}
          name="user.gender"
          {...this.props.fieldAttrs}
        >
          <option value="male">male</option>
          <option value="female">female</option>
        </select>
        <label>
          <input
            type="checkbox"
            name="user.checkboxes[]"
            checked={this.props.user.checkboxes.includes('1')}
            value="1"
            {...this.props.fieldAttrs}
          />
          First checkbox
        </label>
        <br />
        <label>
          <input
            type="checkbox"
            name="user.checkboxes[]"
            checked={this.props.user.checkboxes.includes('2')}
            value="2"
            {...this.props.fieldAttrs}
          />
          Second one
        </label>
      </form>
    );
  }
}
 
// ...
 
const formNameReducer = formReducer('formName');
 
function firstReducer(state = {}, action) {
  switch (action.type) {
    default:
      // add form reducer as default reducer
      return formNameReducer(state, action);
  }
}
 
// ...
 
// add mergeActionsToProps as third argument
const Connected = connect(mapStateToProps, formActions, mergeActionsToProps)(Example);