我如何使用Object.assign（）来按需创建此状态对象

Question

I'm using Redux to create a simple contacts application. My state object looks like the following:

{
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    }
  ],
  "activeContact": {
    "name": "Peter",
    "phone": "883292300348"
  }
}

I am creating an action to add a contact. I want to add a new object to the contacts array within the state containing the name and number that are coming from input fields on the page. I am using Object.assign() to try and do this but I am getting an error bundle.js:22875 Uncaught TypeError: Cannot convert undefined or null to object and I believe it is coming from my use of Object.assign() in the reducer. This is my reducer code:

export default function (state = {}, action) {
  switch (action.type) {
    case 'ADD_CONTACT':
      return Object.assign({}, state, {
      contacts: state.concat([
        {
          name: action.payload.name,
          phone: action.payload.phone
        }
      ])
    })
    default:
      return state;
    }
}

So if action.payload.name is "Jeff" and action.payload.phone is "5647876578" I want the state returned to look like:

{
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    },
    {
      "name": "Jeff",
      "phone": "5647876578"
    }
  ],
  "activeContact": {
    "name": "Peter",
    "phone": "883292300348"
  }
}

I can't seem to find the issue in my use of Object.assign() but I'm pretty sure this is where my error is coming from. Any help is appreciated!

Edit: Logging state in the reducer returns the following:

[
  {
    "name": "Miguel Camilo",
    "phone": "123456789"
  },
  {
    "name": "Peter",
    "phone": "883292300348"
  },
  {
    "name": "Jessica",
    "phone": "8743847638473"
  },
  {
    "name": "Michael",
    "phone": "0988765553"
  }
]

My ContactsList component:

class ContactList extends Component {
  renderList() {
    return this.props.contacts.map((contact) => {
      return (
        <li
          key={contact.phone}
          onClick={() => this.props.selectContact(contact)}
          className='list-group-item'>{contact.name}</li>
      );
    });
  }
  render() {
    return (
      <ul className = 'list-group col-sm-4'>
        {this.renderList()}
      </ul>
    );
  }
}

function mapStateToProps(state) {
  return {
    contacts: state.contacts
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ selectContact: selectContact }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(ContactList)

My ActiveContact portion of the state is getting modified like this in it's reducer:

export default function (state = null, action) {
  switch (action.type) {
    case 'CONTACT_SELECTED':
      return action.payload
  }
  return state;
 }

Answer 1

The reason that you are getting this error is that your initial state has no contacts array:

export default function (state = {}, action) {
...
}

Try revising your state so that it initially has an empty contacts array like so:

export default function (state = { contacts : [] }, action) {
...
}

Also, consider revising your 'ADD_CONTACT' action to use Array#concat like so:

case 'ADD_CONTACT':
  return Object.assign({}, state, {
    contacts: state.contacts.concat([
      {
        name: action.payload.name,
        phone: action.payload.phone
      }
    ])
  })