Redux-Form: Not able to change value of input elements

Question

I've been trying to implement a form in MapsAddrForm.jsx using Redux-Form and I can't seem to change the value of my input element. When the page loads, the input element does not respond to keyboard input, and when the form field submits, it returns an empty object to the parent component DistrictFinder. Beyond these two files, I've also added form:formReducer as an argument to combineReducers much like the simple example in the Redux-Form tutorials. Is there any way to restore the ability for the DistrictFinder to receive data objects from the address form? For reference, I'm using React 15.1.0, React-redux 4.4.5, ES6, and Redux-Form 5.3.1, all compiled using Webpack.

MapsAddrForm.jsx

import React, {Component} from 'react';
import { connect } from 'react-redux';
import {reduxForm} from 'redux-form';

class MapsAddrForm extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {fields: {address,address2}, handleSubmit} = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <input type="text" placeholder="Your address" {...address}/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default reduxForm({
  form: 'addressForm',                          
  fields: ['address']
})(MapsAddrForm);

DistrictFinder.jsx

import React, { Component, PropTypes } from 'react'
import MapsAddrForm from './MapsAddrForm.jsx'
import { connect } from 'react-redux'
import { changeAddress } from '../actions/index.jsx'

class DistrictFinder extends Component {
  constructor(props) {
    super(props);
    this.handleAddrSubmit = this.handleAddrSubmit.bind(this);
  }

  handleAddrSubmit(data) {
    console.log("Address received: " + JSON.stringify(data));
  }

  render() {
    const {address, district} = this.props
    return (
      <div class="GMaps">
        <h1>Find your district!</h1>
        <MapsAddrForm onSubmit={this.handleAddrSubmit} />
        <p>My district number is: {district}</p>
      </div>
    );
  }
}

DistrictFinder.propTypes = {
  district: PropTypes.string.isRequired,
  dispatch: PropTypes.func.isRequired
};

function mapStateToProps(state) {
  const { district } = state.infoChange;

  return {
    district
  };
};

export default connect(mapStateToProps)(DistrictFinder);

Answer 1

I ran into this as well on [email protected]

After looking at the source for one of the examples, I noticed the call to combineReducers has an explicit key "form" to the object argument. When I added this explicit key, the fields became editable.

// Correct
const reducer = combineReducers({
  form: reduxFormReducer // mounted under "form"
})

If you have an existing app, like I do, you likely have this style es6 syntax from the various redux starters.

// Incorrect: results in the witnessed bad behavior
const reducer = combineReducers({
  reduxFormReducer
})

See the combineReducers call at https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L10

It'd be interesting to see if this could be a constant that could be passed in and leveraged by the lib. "form" feels like a easily corruptible "namespace".