ReactJS + Redux：フォームの状態を維持するための適切で正しい方法は何ですか？

Question

ReactJS + Reduxでは、Material-UIのTextField,http://www.material-ui.com/#/components/text-fieldを使用して、私は現在、firstName、lastName、birthMonth、birthDay、birthYearをユーザーが入力するフォームを持っています。

私はすべての入力に対して作用を有する、あまりにもそれをすべての変更を更新するという点で、以下を持って、それすべての作品をが、特に誕生日のために、非常に冗長なように思える、例えば：

コンポーネントInputComponent.jsで：

自分の行動のためのその後

updateFirstName(event) { 
    this.props.actions.updateFirstName(event.target.value) 
    } 

    updateLastName(event) { 
    this.props.actions.updateLastName(event.target.value) 
    } 

    updateBirthMonth(event) { 
    this.props.actions.updateBirthMonth(event.target.value) 
    } 

    updateBirthDay(event) { 
    this.props.actions.updateBirthDay(event.target.value) 
    } 

    updateBirthYear(event) { 
    this.props.actions.updateBirthYear(event.target.value) 
    } 

    <TextField 
    hintText="Enter First Name" 
    onChange={this.updateFirstName} 
    value={this.props.userInfo.firstName} 
    /> 
    <TextField 
    hintText="Enter Last Name" 
    onChange={this.updateLastName} 
    value={this.props.userInfo.lastName} 
    /> 
    <TextField 
    hintText="Enter Birth Month" 
    onChange={this.updateBirthMonth} 
    value={this.props.userInfo.birthMonth} 
    /> 
    <TextField 
    hintText="Enter Birth Day" 
    onChange={this.updateBirthDay} 
    value={this.props.userInfo.birthDay} 
    /> 
    <TextField 
    hintText="Enter Birth Year" 
    onChange={this.updateBirthYear} 
    value={this.props.userInfo.birthYear} 
    /> 

：私の減速で、その後

updateFirstName(eventValue) { 
    return { 
     type: 'UPDATE_FIRST_NAME', 
     firstName: eventValue 
    } 
    }, 

    updateLastName(eventValue) { 
    return { 
     type: 'UPDATE_LAST_NAME', 
     lastName: eventValue 
    } 
    }, 

    updateBirthMonth(eventValue) { 
    return { 
     type: 'UPDATE_BIRTH_MONTH', 
     birthMonth: eventValue 
    } 
    }, 

    updateBirthDay(eventValue) { 
    return { 
     type: 'UPDATE_BIRTH_DAY', 
     birthDay: eventValue 
    } 
    }, 

    updateBirthYear(eventValue) { 
    return { 
     type: 'UPDATE_BIRTH_YEAR', 
     birthYear: eventValue 
    } 
    }, 

、userReducer.js：

const userReducer = function(userInfo = {}, action){ 
    switch(action.type){ 
    case 'UPDATE_FIRST_NAME': 
     return { 
     ...userInfo, 
     firstName: action.firstName 
     } 

    case 'UPDATE_LAST_NAME': 
     return { 
     ...userInfo, 
     lastName: action.lastName 
     } 

    case 'UPDATE_BIRTH_MONTH': 
     return { 
     ...userInfo, 
     birthMonth: action.birthMonth 
     } 

    case 'UPDATE_BIRTH_DAY': 
     return { 
     ...userInfo, 
     birthDay: action.birthDay 
     } 

    case 'UPDATE_BIRTH_YEAR': 
     return { 
     ...userInfo, 
     birthYear: action.birthyear 
     } 

    default: 
     return userInfo 
    } 
} 

export default userReducer 

ReactJS + Reduxのために、入力のフォームを処理するためのより良い、より適切かつ効率的な練習はありますか？

ありがとうございます！

Answer 1

Forewarning、私はReactに非常に新しいですし、コメントとして追加するには大きすぎる思考の列を提供しようとしています。これが失敗した場合、私は答えを削除します...

すべての更新機能を1つのupdateUserInfoに組み合わせることはできますか？

// Component 
<TextField name="firstName" onChange={this.updateUserInfo} ... /> 
<TextField name="lastName" onChange={this.updateUserInfo} ... /> 

updateUserInfo(event) { 
    this.props.actions.updateUserInfo(event.target.name, event.target.value); 
} 

// Action 
updateUserInfo(eventProperty, eventValue) { 
    return { 
     type: 'UPDATE_USER_INFO', 
     property: eventProperty, 
     value: eventValue 
    }; 
} 

// Reducer 
const userReducer = function(userInfo = {}, action){ 
    switch(action.type){ 
    case 'UPDATE_USER_INFO': 
     var returnObj = { 
     ...userInfo 
     }; 
     returnObj[action.property] = action.value; 
     return returnObj; 
    } 
} 

代替アクションと減速：

// Action 
updateUserInfo(eventProperty, eventValue) { 
    var updatedData = {}; 
    updatedData[eventProperty] = eventValue; 

    return { 
     type: 'UPDATE_USER_INFO', 
     data: updatedData 
    }; 
} 

// Reducer 
const userReducer = function(userInfo = {}, action){ 
    switch(action.type){ 
    case 'UPDATE_USER_INFO': 
     return { 
     ...userInfo, 
     ...action.data 
     }; 
    } 
} 

Answer 2

私は非常にredux-formを見てすることをお勧めいたします。あなたはそれを正しい方法でやっている

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

class ContactForm extends Component { 
    render() { 
    const {fields: {firstName, lastName, email}, handleSubmit} = this.props; 
    return (
     <form onSubmit={handleSubmit}> 
     <div> 
      <label>First Name</label> 
      <input type="text" placeholder="First Name" {...firstName}/> 
     </div> 
     <div> 
      <label>Last Name</label> 
      <input type="text" placeholder="Last Name" {...lastName}/> 
     </div> 
     <div> 
      <label>Email</label> 
      <input type="email" placeholder="Email" {...email}/> 
     </div> 
     <button type="submit">Submit</button> 
     </form> 
    ); 
    } 
} 

ContactForm = reduxForm({ // <----- THIS IS THE IMPORTANT PART! 
    form: 'contact',       // a unique name for this form 
    fields: ['firstName', 'lastName', 'email'] // all the fields in your form 
})(ContactForm); 

export default ContactForm;