ReactJS + Redux：維護表單狀態的正確和正確做法是什么？

Question

在ReactJS + Redux中，使用Material-UI的TextField ， http://www.material-ui.com/#/components/text-field ，我目前有一個表單，用戶可以在其中填寫firstName，lastName，birthMonth，birthdayDay，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

預警，我對React還是很陌生，只是想提供一種思路，以至於無法添加為評論。 如果失敗，我將刪除答案...

您可以將所有更新功能合並到一個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;