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

我强烈建议您查看redux-form。

您的表单将是这样的 (example from here)：

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;

Answer 2

预先警告，我对 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
      };
  }
}