Redux-Form：入力要素の値を変更できません

Question

私はMapsAddrForm.jsxでRedux-Formを使用してフォームを実装しようとしていましたが、入力要素の値を変更できないようです。ページがロードされると、input要素はキーボード入力に応答せず、フォームフィールドが送信されると空のオブジェクトを親コンポーネントDistrictFinderに返します。この2つのファイル以外に、redux-Formチュートリアルの単純な例と同様に、formReducerをcombineReducersの引数として追加しました。 DistrictFinderがアドレスフォームからデータオブジェクトを受け取る能力を回復する方法はありますか？参考までに、React 15.1.0、React-redux 4.4.5、ES6、Redux-Form 5.3.1を使用しています。これらはすべて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

私は見ての後redux-form@6.2.0

にも、このに走りましたソースの例の一つは、私はcombineReducersへの呼び出しが明示的なキーを持っていることに気づいた "フォーム"をオブジェクト引数に追加します。この明示的なキーを追加すると、フィールドは編集可能になりました。

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

私がやるようにあなたは、既存のアプリを持っている場合、あなたはおそらく、様々なReduxのスターターからこのスタイルES6の構文を持っています。

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

はcombineReducersこれが渡されたとlibで活用することができ一定であることができるかどうかを確認するために興味深いものになるだろうhttps://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L10

で呼び出しを参照してください。 "フォーム"は、簡単に壊れやすい "名前空間"のように感じます。