如何正确更新对象的状态（ReactJS + Redux）？

Question

所以我有两个输入字段：

  <TextField onChange={this.handleUserUsername.bind(this)}
    value={this.props.userInfo.username}
  />

  <TextField onChange={this.handleUserEmail.bind(this)}
    value={this.props.userInfo.email}
  />

一旦输入，我想将它们存储在名为“userInfo”的对象的状态中，如下所示：

  handleUserUsername(event){
    this.props.actions.updateUsername(event.target.value)
  }

  handleUserEmail(event){
    this.props.actions.updateEmail(event.target.value)
  } 

动作创建者是：

  updateUsername: function(eventValue){
    return {
      type: 'UPDATE_USERNAME',
      username: eventValue
    }
  },

  updateEmail: function(eventValue){
    return {
      type: 'UPDATE_USERNAME',
      email: eventValue
    }
  }

reducer 是：

function(userInfo={}, action){
  switch(action.type){
    case 'UPDATE_USERNAME':
      return {
        username: action.username
      }

    case 'UPDATE_EMAIL':
      return {
        email: action.email
      }

但是一旦文本被输入到用户名 TextField 中，它会显示在 TextField 中输入的任何内容，并正确存储“用户名”的“Z”并记录以下内容（在示例中，输入了“Z”）：

然后，当在本例中将文本“M”输入到电子邮件 TextField 中时，用户名状态在应保持为 Z 时变为“未定义”，甚至不存储电子邮件状态：

在示例的日志中，我希望看到的是：

userInfo: Object
    username: "Z"
    email: "M"

我正在使用以下内容来访问状态和操作：

function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

为什么它没有正确存储“userInfo”对象的状态？更新此类对象的正确方法是什么？最终，我想将“userInfo”对象存储到一个名为 users 的数组中，它将存储所有用户信息。

编辑**

当我在用户名文本字段中输入“q”时，显示如下：

然后，当我在密码文本字段中输入“m”时，现在两者都变得未定义：

编辑 2 **

const registerReducer = function(userInfo={}, action){
  switch(action.type){
    case 'UPDATE_USERNAME':
      return {
        ...userInfo,
        username: action.username
      }

    case 'UPDATE_EMAIL':
      return {
        ...userInfo,
        email: action.email
      }

Answer 1

在您的示例中，您错过了应该返回现有状态以及由于您的操作而发生的更改，从而更改先前的状态。

这就是减速器的作用：

动作描述了某事发生的事实，但不指定应用程序的状态如何变化作为响应。这是减速器的工作。

您需要做的是始终返回一个新状态对象，该对象是针对发生的特定操作将减速器应用于旧状态对象的结果。

代替

case 'SOME_ACTION_TYPE':
  return {
    someProperty: 'theNewValue'
  }

你应该做的是：

case 'SOME_ACTION_TYPE':
  return {
    ...state, // notice how I create a new object, but preserve all of the old
    propertyThatIChangedInMyReducer: 'theNewValue' // this will override the old
  }

基本上，您使用 reducer，应用您对发生的特定操作所做的更改并返回该新对象，该对象还包含状态树的其他部分保持不变。你错过了归还另一部分。

如果假设你也有一个密码字段，你会以类似的方式处理，你会做这样的事情：

case 'UPDATE_PASSWORD':
  return {
    ...state, //preserve current state, apply changes to it below
    password: action.password,
  }; 

Answer 2

我认为问题在于您创建了更新的状态对象，其中仅包含有关已更改字段的信息。由于 Redux 的 principles 之一，它的状态应该是不可变的，每次你想要更新它时，你都应该创建新的状态对象并进行必要的更改。

在您的情况下，您应该在创建新状态对象时返回这两个字段（即使其中一个没有改变）：

function(userInfo={}, action){
  switch(action.type){
  case 'UPDATE_USERNAME':
    return {
      username: action.username,
      email: userInfo.email     // userInfo is current state, we should save old value
    }

  case 'UPDATE_EMAIL':
    return {
      username: userInfo.username,  // userInfo is current state, we should save old value
      email: action.email      
    }

由此您创建新状态，其中包含未更改的字段（具有相同的值）和更改的字段（具有新值）

编辑：

更多示例：

假设您的应用程序的状态如下：

oldState = {
    email: "oldValue",
    userName: "oldValue"
}

那么如果你尝试更改电子邮件，你的 reducer 应该通过以下方式返回 state 对象：

return Object.assign({}, oldState, {
    email: "newValue"
})

上面的代码会在旧状态的基础上产生新的状态对象，并在新状态下改变email属性。 Object.assign

因此，您的新状态将如下所示：

{
    email: "newValue",
    userName: "oldValue"    
}

在您的示例中，您的减速器返回状态对象如下：

{
    email: "newValue",
}

所以 redux 无法理解 userName 的当前值是什么。