redux-form Field cannot enter text into input field

Question

I am able to render an input field using redux-form, but I can't seem to type any text inside the field (the component seems to re-render with each keystroke). Below is the code, I created a really simple one to try to pinpoint the problem:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { Field, reduxForm, reducer as formReducer } from 'redux-form';

const reducers = {
  // ... your other reducers here ...
  form: formReducer     // <---- Mounted at 'form'
};

const reducer = combineReducers(reducers);
const store = createStore(reducer);

class TestForm extends Component {

  formSubmit(props) {
    console.log('form submitted');
  }

  render() {

    const { handleSubmit } = this.props;

    return (
      <div>
        This is a test form.
        <div>
          <form onSubmit={handleSubmit(this.formSubmit.bind(this))}>
            <Field name="firstField" component="input" type="text" />
            <button type="submit">Submit</button>
          </form>
        </div>
      </div>
    );
  }

}

TestForm = reduxForm({
  form: 'testingForm'
})(TestForm);

export default TestForm;

I also literally copied and pasted the example from the official redux-form docs: http://redux-form.com/6.0.2/docs/MigrationGuide.md/ and I still encounter the same problem. Been trying to figure this out for some hours now. Could it be the version of redux or redux-form?

I'm using redux v3.5.2 and redux-form v6.2.1.

Would appreciate any help!

Answer 1

I had the same issue. The cause was that I failed to add the formReducer to the list of reducers I was using. To fix I added:

import { reducer as formReducer } from 'redux-form'
const RootReducer = combineReducers({

...

   form: formReducer     // <---- Mounted at 'form'
})