Как получить избыточность для добавления контакта в мой объект состояния контактов?

Question

Я создаю очень простое приложение для контактов, чтобы познакомиться с React и Redux.Прямо сейчас я пытаюсь создать функциональность, чтобы добавить контакт.Я думал, что правильно настроил действие и редуктор, но в настоящее время состояние, которое передается моему редуктору, равно нулю.Я ожидал бы, что текущий список контактов будет в состоянии, которое передано.Если я регистрирую состояние после выполнения редуктора, он даже не получает один контакт, который я ожидал добавить, он все еще пуст.Когда я добавляю некоторый текст в поля ввода и нажимаю «Добавить контакт», я получаю ошибку Cannot convert undefined or null to object

В редукторе добавления контактов состояние, которое передается, является нулевым, и я думаю, что это моя проблема.Я хочу, чтобы этот редуктор получал состояние в качестве текущего списка контактов, добавлял к этому контакт, содержащийся в полезной нагрузке, и возвращал обратно новое состояние, содержащее этот полный список.

Мой код выглядит следующим образом

Действие:

function addContact(contact) {
  console.log("it gets to the action");
  return {
    type: 'ADD_CONTACT',
    payload: contact
  }
}

export default addContact;

AddContacts Редуктор:

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

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

Компонент, который вызывает это действие:

import React, { Component } from 'react'
import AddContactButton from './AddContactButton';
import { connect } from 'react-redux'
import addContact from '../actions/action_add_contact'
import { bindActionCreators } from 'redux'

class AddContactModal extends Component {

  constructor() {
    super();
    this.state = {firstName: "", phone: ""};
  }

  handleNameChange(event) {
    this.setState({firstName: event.target.value})
  }

  handlePhoneChange(event) {
    this.setState({phone: event.target.value});
  }

  render() {

    return(
      <div>
        <input type="text" className="name" placeholder="Contact Name" onChange={(event) => this.handleNameChange(event)}/>
        <input type="text" className="phone" placeholder="Contact Phone" onChange={(event) => this.handlePhoneChange(event)}/>
        <AddContactButton firstName={this.state.firstName} firstName={this.state.phone} onClick={() => this.props.addContact({"name": this.state.firstName, "phone": this.state.phone})}/>
      </div>
    );
  }
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(AddContactModal)

Создание магазина:

const createStoreWithMiddleware = applyMiddleware()(createStore);
const initialState = {
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    }
  ],
  "activeContact": null
};

ReactDOM.render(
  <Provider store={ createStoreWithMiddleware(reducers, initialState) }>
   <App />
  </Provider>
, document.querySelector('.container'));

Редуктор контактов, который просто возвращает жестко запрограммированный список контактов для установки начального состояния:

export default function () {
  return [{
    "name": "Miguel Camilo",
    "phone": "123456789"
  },{
    "name": "Peter",
    "phone": "883292300348"
  },{
    "name": "Jessica",
    "phone": "8743847638473"
  },{
    "name": "Michael",
    "phone": "0988765553"
  }];
}

Я почти уверен, что моя проблема связана с использованием в компоненте mapStateToProps и mapDispatchToProps,когда я смотрю на состояние притока, я вижу, что он добавил коллекцию "addContacts", которую я не думаю, что я хочу?Разве он не должен просто извлечь полезную нагрузку из действия и добавить ее в коллекцию «контактов»?

В функции mapStateToProps я добавил оператор print, чтобы увидеть state и вот он результат.Я не уверен, почему эта коллекция addContact[] существует.Я не хочу этого, я просто хочу, чтобы функция addContact добавляла контакт в существующую коллекцию contacts[].

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

Answer 1

Для вашего Reducer попробуйте что-нибудь попроще, например:

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

Тогда для вашего mapDispatchToProps для простых приложений он может работать, используя только объект.

Например,

const actions = { addContact };

export default connect(mapStateToProps, actions)(AddContactModal);

ИЛИ обновление текущего кода:

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addContact }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(AddContactModal);

Надеюсь, это поможет;).

Я могу показать вамдругой способ построить магазин и добавить его в провайдера.Потому что то, как ты это сделал, отличается от того, к чему я привык.

С наилучшими пожеланиями.