const { combineReducers, createStore } = Redux;

const { Provider, connect } = ReactRedux;

const { Component } = React; 

​

const InputComponent = (props) => (

  <div>

    <div>{props.field}</div>

    <input type='text' value={props.value} onChange={props.handleChange} />

  </div>

)

​

const Input = connect(

  (state, ownProps) => ({

    value: state.fields[ownProps.field] || ''

  }),

  (dispatch, ownProps) => ({

    handleChange: (e) => dispatch({

      type: 'CHANGE_FORM',

      field: ownProps.field,

      value: e.target.value

    })

  })

)(InputComponent);

​

const FormComponent = (props) => (

  <div>

    <Input field='first' />

    <Input field='second' />

    <p>

      <button onClick={props.handleSubmit}>Submit</button>

    </p>

  </div>

)

​

const Form = connect(

  (state) => ({

    fields: state.fields

  }),

  null,

  (stateProps, dispatchProps, ownProps) => ({

    ...stateProps, ...dispatchProps, ...ownProps,

    handleSubmit() {

      Object.keys(stateProps.fields).map((field) => {

        console.log(`${field}: ${stateProps.fields[field]}`);

      })

    }

  }) 

)(FormComponent);

​

const initialState = {fields: {}};

const reducer = (state = initialState, action) => {

  switch (action.type) {

    case('CHANGE_FORM'):

      const newFields = {...state.fields};

      newFields[action.field] = action.value;

      return {...state, fields: newFields};

    default:

      return state;

  }

}

​

ReactDOM.render(

  <Provider store={createStore(reducer)}>

    <Form />

  </Provider>,

  document.getElementById('root')

)