How to properly update state of an object (ReactJS + Redux)?
<p>So I have two input fields: </p>

<pre><code>  &lt;TextField onChange={this.handleUserUsername.bind(this)}
    value={this.props.userInfo.username}
  /&gt;

  &lt;TextField onChange={this.handleUserEmail.bind(this)}
    value={this.props.userInfo.email}
  /&gt;
</code></pre>

<p>once entered, I would like to store them in the state of an object named 'userInfo', like so:</p>

<pre><code>  handleUserUsername(event){
    this.props.actions.updateUsername(event.target.value)
  }

  handleUserEmail(event){
    this.props.actions.updateEmail(event.target.value)
  } 
</code></pre>

<p>and the action creators are: </p>

<pre><code>  updateUsername: function(eventValue){
    return {
      type: 'UPDATE_USERNAME',
      username: eventValue
    }
  },

  updateEmail: function(eventValue){
    return {
      type: 'UPDATE_USERNAME',
      email: eventValue
    }
  }
</code></pre>

<p>and the reducer is: </p>

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

    case 'UPDATE_EMAIL':
      return {
        email: action.email
      }
</code></pre>

<p>But once texts are inputted into username TextField, it displays whatever it is typed in the TextField and correctly stores 'Z' for the 'username'  and logs the following (in the example, 'Z' was typed in):</p>

<p><a href="https://i.stack.imgur.com/6SoOL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6SoOL.png" alt="enter image description here"></a></p>

<p>Then when a text, 'M' in this example, is entered into the email TextField, the username state becomes 'undefined' when it should stay as Z, and email state is not even stored:</p>

<p><a href="https://i.stack.imgur.com/scRlF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/scRlF.png" alt="enter image description here"></a> </p>

<p>In the log for the example, what I am hoping to see is:</p>

<pre><code>userInfo: Object
    username: "Z"
    email: "M"
</code></pre>

<p>And I am using the following to access state and actions:</p>

<pre><code>function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}
</code></pre>

<p>Why isn't it correctly storing the state for the 'userInfo' object? What would be the proper way to update such an object? Eventually I want to store the 'userInfo' object into an array called users, where it would store all the user information. </p>

<p>EDIT **</p>

<p>When I entered 'q' in the username textfield, the following shows: </p>

<p><a href="https://i.stack.imgur.com/7UhuY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7UhuY.png" alt="enter image description here"></a></p>

<p>Then when I enter 'm' in the password textfield, both become undefined now:</p>

<p><a href="https://i.stack.imgur.com/8ASJC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8ASJC.png" alt="enter image description here"></a></p>

<p>EDIT 2 **</p>

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

    case 'UPDATE_EMAIL':
      return {
        ...userInfo,
        email: action.email
      }
</code></pre>