Добавление объектов в массив Redux

Пишу сайт пиццерии. Каталог загружается из редакса, но при добавлении товара в корзину, получаю undefined. Подскажите, как правильно добавлять каждый объект в стейт?

cart-reducer

const ADD_PIZZA_CART = 'cart/ADD_PIZZA_CART'

const initialState = {
  items: []
}

const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_PIZZA_CART: {
      debugger
      return { ...state, items: action.payload }
    }
    default:
      return state
  }
}

export const addPizzaToCartAC = (pizzaObj) => ({ type: ADD_PIZZA_CART, pizzaObj })

export default cartReducer

Catalogue

import React from 'react'
import CatalogItem from './CatalogItem/CatalogItem'
import classes from './Catalogue.module.css'
import {useSelector, useDispatch} from 'react-redux'

import { addCatalogList, toggleIsActive } from "../../redux/catalog-reducer"
import { addPizzaToCartAC } from "../../redux/cart-reducer"
import catalogList from '../../common/json/catalog-list'

const Catalogue = props => {
  const dispatch = useDispatch()
  const { catalogData, isActive } = useSelector(({ catalogPage }) => ({
    catalogData: catalogPage.catalogData,
    isActive: catalogPage.isActive
  }))

  const items = useSelector(({ cart }) => ({
    items: cart.items,
  }))

  React.useEffect(() => { 
    dispatch(addCatalogList(catalogList))
  }, [dispatch])
  
  const addPizzaToCart = (obj) => {
    dispatch(addPizzaToCartAC(obj))
  }
  
  return (
    <div className={classes.catalog_wrapper} >
      <div className={classes.wrapper} >
        {catalogData.map(item => (
              <CatalogItem key={item.id}
                          onClickAddPizza={addPizzaToCart}
                          {...item}
                          items={items}
                          toggleIsActive={toggleIsActive}
                          isActive={isActive} />
              ))}
      </div>  
    </div>
  )
}

export default Catalogue

В dispatch передается объект

{id: 3, title: 'Пицца 4 сыра', image: 'https://pics.clipartpng.com/Pizza_PNG_Clipart-572.png', activePrice: '440', activeSize: '30 см'}

Ответы (1 шт):

Автор решения: p1uton

В редюсере в поле items нужно передавать новый массив со всеми старыми элементами и добавлением нового:

const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_PIZZA_CART: {
      debugger
      return {
        ...state, 
        items: [...state.items, action.payload],
      }
    }
    default:
      return state
  }
}

В action creator нужно передавать объект в поле payload:

export const addPizzaToCartAC = (pizzaObj) => ({
  type: ADD_PIZZA_CART, 
  payload: pizzaObj 
})
→ Ссылка