1

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

0

В редюсере в поле 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 
})
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.