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;