Как я могу использовать Object.assign (), чтобы создать этот объект состояния, как я хочу

Question

Я использую Redux для создания простого приложения контактов.Мой объект состояния выглядит следующим образом:

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

Я создаю действие для добавления контакта.Я хочу добавить новый объект в массив contacts в состоянии, содержащем имя и номер, которые поступают из полей ввода на странице.Я использую Object.assign(), чтобы попытаться сделать это, но я получаю ошибку bundle.js:22875 Uncaught TypeError: Cannot convert undefined or null to object, и я полагаю, что это происходит из-за моего использования Object.assign() в редукторе.Это мой код редуктора:

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;
    }
}

Так что, если action.payload.name - это "Джефф", а action.payload.phone - это "5647876578", я хочу, чтобы возвращаемое состояние выглядело так:

{
  "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"
  }
}

Кажется, я не могу найти проблему в моем использовании Object.assign (), но я почти уверен, что именно отсюда моя ошибка.Любая помощь приветствуется!

Редактировать: Состояние регистрации в редукторе возвращает следующее:

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

Мой компонент ContactsList:

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)

Моя ActiveContact частьсостояние изменяется в редукторе следующим образом:

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

Answer 1

Причина, по которой вы получаете эту ошибку, состоит в том, что ваше начальное состояние не имеет массива contacts:

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

Попробуйте изменить свое состояние так, чтобы оно изначально имело пустой массив контактов, например:

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

Также рассмотрите возможность изменения действия 'ADD_CONTACT' для использования Array#concat, например, так:

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