Reduxフォーム - 初期値が状態で更新されない

Question

redux-formを使用して初期フォームのフィールド値を設定する際にいくつか問題があります。

私はredux-form v6.0.0-rc.3を使用しており、v15.3.0に反応しています。

これは私の問題です。ユーザーのグリッドがあり、ユーザーの行をクリックすると、ユーザーの編集ページに移動し、ユーザーIDをURLに含めます。その後、ユーザーの編集ページで、idを取得してthis.pate.usersを返すアクション作成者であるfetchUser（this.props.params.id）を呼び出しています。

が

function mapStateToProps(state) { 
    return { initialValues: state.users.user } 
} 

私の理解では、これがinitialValuesがstate.users.userに設定する必要があり、この状態が更新されるたびinitialValuesも更新する必要があります。私はその後呼び出すことで、フォームinital値を設定しようとしています。これは私には当てはまりません。 InitialValuesは、以前にクリックされたユーザ行（すなわち、this.state.users.userの以前の状態）に設定されています。だから私はこれをテストして、このコンポーネントにボタンを追加することを決定し、そのクリックされたとき、私はハードにコーディングされたユーザーIDで再びfetchUserを呼び出しています：

this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');

これは正しく状態を更新けどinitialValuesの値れます変えないで。状態が更新されると更新されません。私はこの同じプロセスをredux形式の古いバージョンでテストし、期待どおりに動作しました。

私はここで何か間違っているか、これは私が使用しているバージョンの問題です。

ユーザー編集フォーム -

class UsersShowForm extends Component { 

    componentWillMount() { 
     this.props.fetchUser(this.props.params.id); 
    } 

    onSubmit(props){ 
     console.log('submitting'); 
    } 

    changeUser() { 
     this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3'); 
    } 

    renderTextField(field) { 
     return (
     <TextField 
     floatingLabelText={field.input.label} 
     errorText={field.touched && field.error} 
     fullWidth={true} 
     {...field.input} 
     />) 
    } 

    render() { 
     const { handleSubmit, submitting, pristine } = this.props; 

     return(

      <div> 
       <form onSubmit={handleSubmit(this.onSubmit.bind(this))} className="mdl-cell mdl-cell--12-col"> 

        <Field name="emailAddress" component={this.renderTextField} label="Email Address"/> 

        <Field name="firstName" component={this.renderTextField} label="First Name"/> 

        <Field name="lastName" component={this.renderTextField} label="Last Name"/> 
       </form> 

       <RaisedButton onClick={this.changeUser.bind(this)} label="Primary" primary={true} /> 
      </div> 

     ); 
    } 
} 

function mapStateToProps(state) { 
    return { initialValues: state.users.user } 
} 

UsersShowForm = reduxForm({ 
    form: 'UsersShowForm' 
})(UsersShowForm) 

UsersShowForm = connect(
    mapStateToProps, 
    actions    
)(UsersShowForm) 

export default UsersShowForm 

ユーザーリデューサー -

import { 
    FETCH_USERS, 
    FETCH_USER 
} from '../actions/types'; 

const INITIAL_STATE = { all: [], user: {} }; 

export default function(state = { INITIAL_STATE }, action) { 
    switch (action.type) { 
     case FETCH_USERS: 
      return {...state, all: action.payload }; 
     case FETCH_USER: 
      return {...state, user: action.payload }; 
     default: 
      return state; 
    } 

} 

リデューサーインデックス -

import { combineReducers } from 'redux'; 
import { reducer as formReducer } from 'redux-form'; 
import usersReducer from './users_reducer'; 

const rootReducer = combineReducers({ 
    form: formReducer, 
    users: usersReducer 
}); 

export default rootReducer; 

Answer 1

私はReduxの形式の5月v6.0.0にアップデートした後、同じ問題に直面していました-rc.4。

私はあなたがreduxFormコネクタを持つコンポーネント/コンテナを飾るときに自動的に読み込まれinitialValues小道具を使用することになり、リソースからデータを事前入力redux-form形成するために、真の

UsersShowForm = reduxForm({ 
    form: 'UsersShowForm', 
    enableReinitialize: true 
})(UsersShowForm) 

Answer 2

にenableReinitializeを設定し解決。 initialValuesのキーがフォームフィールドのnameと一致することが重要です。

注：最初にreduxForm()デコレータを適用し、次にconnect()をreduxから適用する必要があります。それは別の方法では動作しません。

Reduxの形式7.2.3使用：公式ドキュメントから

const connectedReduxForm = reduxForm({ 
form: 'someUniqueFormId', 
    // resets the values every time the state changes 
    // use only if you need to re-populate when the state changes 
    //enableReinitialize : true 
})(UserForm); 

export default connect(
    (state) => { 
    // map state to props 
    // important: initialValues prop will be read by redux-form 
    // the keys must match the `name` property of the each form field 
    initialValues: state.user 
    }, 
    { fetchUser } // map dispatch to props 
)(connectedReduxForm) 

：小道具やreduxForm initialValuesに提供

値を（）configパラメータは、フォームの状態にロードされますそれ以降は「原始的」として扱われる。また、reset（）が送出されたときに返される値になります。 「元の」値を保存することに加えて、フォームを初期化すると既存の値が上書きされます。あなたは、インデックスの減速が存在doesntのように、そのがusersReducerをインポートしないでインポートするときに

official documentation