React Redux удаляет элемент из массива по определенному индексу

Я пытаюсь удалить элемент в массиве, обратившись к идентификатору объекта в массиве, который я сопоставляю с отдельными компонентами.

Я почти уверен, что мой редуктор настроен правильно, но у меня возникают проблемы с передачей идентификатора объекта в действие. Когда я console.info полезную нагрузку действия, я получаю Class {dispatchConfig: {…}, _targetInst: FiberNode, _dispatchListeners: ƒ, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, …}.

Вот код

действие:

  console.info(id)
  return {
    type: DELETE_QUOTE,
    payload: id
  }
} 

редуктор:

        return {
          ...state,
          generatedQuotes: state.generatedQuotes.filter(quote=>quote.id !== action.payload.id)
        }

Компонент контейнера:

{this.props.generatedQuotes.map((item, i) => 
                <div className = "column is-half" key = {i}>
                <QuoteCard
                  author = {item.name} 
                  quote = {item.quote} 
                  email = {item.email} 
                  date = {item.date}
                  id = {item.id}
                  deleteQuote = {this.props.deleteQuote}
                />
                </div>
          )}

mapDispatchToProps в компоненте контейнера:

const mapDispatchToProps = dispatch => {
  return {
    generateQuote: () => dispatch(generateQuote()),
    deleteQuote: id => dispatch(deleteQuote(id))
  };
}

презентационная составляющая:

const QuoteCard = ({author, email, date, quote, id, deleteQuote}) => {
  return (
    <div className = "box" key = {date}>
      <article className = "media">
        <div className = "media-left">
          <figure className = "image is-128x128">
            <img src = "https://bulma.io/images/placeholders/128x128.png" alt = "Mock" />
          </figure>
        </div>
        <div className = "media-content">
          <div className = "content">
            <p>
              <strong>{author}</strong>
              <small>{email}</small>
              <br />
              <small><em>{date}</em></small>
              <br />
              {quote}
            </p>
          </div>
        </div>
      </article>
      <br />
      <div className = "buttons">
        <button className = "button is-success is-small" onClick = {() => window.open(`https://twitter.com/intent/tweet?text = "${quote}" Quote by: ${author}`)}>Tweet Quote</button>
        <button className = "button is-danger is-small" onClick = {(id) => deleteQuote(id)}>Delete Quote</button>
      </div>
    </div>
  );
};