Пишу сайт пиццерии. Каталог загружается из редакса, но при добавлении товара в корзину, получаю 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 см'}