unable to dispacth a action to the store in redux - redux

Question

in checkOut js im unable to access the data inside the items arrey but i can access the length how is it possible i added 3 items i can see the items.lenth but when try to use items.map its not working showing error:
TypeError: Cannot read properties of undefined (reading 'image')
store.ts
import { configureStore } from "#reduxjs/toolkit";
import basketReducer from "./basketSlice";
//this is redux like a global store to store users items data
//when users put the items in the shopping cart
export const store = configureStore({
reducer: {
basket: basketReducer,
},
});
busketSlice.ts
import { createSlice } from "#reduxjs/toolkit";
interface BasketItem {
id: string;
title: string;
image: string;
description: string;
price: number;
category: string;
}
const initialState = {
items: [] as BasketItem[],
};
export const basketSlice = createSlice({
name: "basket",
initialState,
reducers: {
addToBasket: (state, action) => {
state.items = state.items.concat(action.payload);
},
removeFromBasket: (state, action) => {
const index = state.items.findIndex((basketItem: any) => basketItem.id === action.payload.id)
let newBasket = [...state.items];
if (index >= 0){
//if item exists in the basket remove it ...
newBasket.splice(index, 1);
} else {
console.warn(`cant remove (id: ${action.payload.id}) because its not in busket`)
}
state.items = newBasket;
},
},
});
export const { addToBasket, removeFromBasket } = basketSlice.actions;
// Selectors - This is how we pull information from the Global store slice
export const selectItems = (state: any) => state.basket.items;
export const selectTotal = (state: any) => state.busket.items.reduce((total:any, item:any) => total + item.price, 0);
const basketReducer = basketSlice.reducer;
export default basketReducer;
Cards.tsx
import Image from 'next/image';
import React, { useEffect, useState } from 'react';
import { StarIcon } from '#heroicons/react/solid';
// import Currency from 'react-currency-formatter';
import { useDispatch } from 'react-redux';
import { addToBasket } from "../basketSlice"
export default function Cards({id,title,image,description,price,category}: any) {
const dispatch = useDispatch()
const addItemsToBusket = () => {
const product = {
id,title,image,description,price,category
}
dispatch(addToBasket(product))//sending the product as an action to the redux store
}
const [rating, set] = useState(5);
const [hasPrime, setH] = useState(Math.random() < 1)
useEffect(() => {
set(Math.floor(Math.random() * 5) + 1 );
}, [])
useEffect(() => {
setH(Math.random() < 0.5 );
}, [])
return (
<div className="relative z-30 flex flex-col p-10 m-5 bg-white ">
<p className='absolute text-xs italic right-2 top-2'>{category}</p>
<Image className='mx-auto' src={image} height={200} width={200} alt=""/>
<h4 className='my-3'>{title}</h4>
<div className='flex'>
{Array(rating).fill(rating).map((_, i) => (
<StarIcon key={i} className='h-6 text-yellow-500'/>
))}
</div>
<p className='my-2 text-xs line-clamp-2 '>{description}</p>
<div>
{/* <Currency quantity={props.price} currency="INR"/> */}
<p className='mb-5'>₹{price}</p>
</div>
{hasPrime && (
<div className='flex items-center -mt-5 space-x-2'>
<img
className='w-12'
src="https://links.papareact.com/fdw" alt="" />
<p className='text-xs text-gray-500'>Free Next-Day Delivary</p>
</div>
)}
<button onClick={addItemsToBusket} className='mt-auto button'>Add to Busket</button>
</div>
)
}
ProductsFeed.tsx
import React from 'react'
import Cards from './Cards'
export default function({ products }: any) {
return (
<div className="grid grid-flow-row-dense mx-auto md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:-mt-40 lg:-mt-52">
{products.slice(0,4).map((product: any) => (
<Cards
key={product.id}
id={product.id}
title={product.title}
price={product.price * 60}
description={product.description}
category={product.category}
image={product.image}
/>
))}
<img className="md:col-span-full" src="https://links.papareact.com/dyz" alt="" />
<div className='md:col-span-2'>
{products.slice(4,5).map((product: any) => (
<Cards
key={product.id}
id={product.id}
title={product.title}
price={product.price * 60}
description={product.description}
category={product.category}
image={product.image}
/>
))}
</div>
{products.slice(5, products.length).map((product: any) => (
<Cards
key={product.id}
id={product.id}
title={product.title}
price={product.price * 60}
description={product.description}
category={product.category}
image={product.image}
/>
))}
</div>
)
}
checkout.tsx
import React from 'react'
import Nav from '../components/Nav'
import { signIn, signOut, useSession } from "next-auth/react"
import { useSelector } from 'react-redux';
import { selectItems } from '../basketSlice';
import CheckOutProduct from '../components/CheckOutProduct';
export default function CheckOut() {
const { data: session } = useSession()
const items = useSelector(selectItems);
console.warn(items)
return (
<div className='h-screen bg-gray-100'>
<Nav />
<main>
{!session? (
<div>
<div className='flex items-center justify-start p-10 m-10 space-x-4 overflow-hidden bg-white md:space-x-10'>
<img src="/checkout.svg" className='h-[7rem] w-[7rem] sm:w-[15rem] sm:h-[15rem]' alt=""/>
<div className=''>
<h1 className='font-bold md:text-[2rem] mb-1'>Your Amazon Cart is empty</h1>
<p className='text-[#007185] hover:text-red-600 cursor-pointer hover:underline hover'>Shop today's deals</p>
<button
className='px-10 py-2 mt-4 button'
onClick={() => signIn()}>Sign in to your account</button>
</div>
</div>
<div className=' h-[5rem] bg-white mx-10' />
</div>
): (
<div>
<div className='flex items-center justify-start p-10 m-10 space-x-4 overflow-hidden bg-white md:space-x-10'>
<img src="/checkout.svg" className='h-[7rem] w-[7rem] sm:w-[15rem] sm:h-[15rem]' alt=""/>
<div className=''>
<h1 className='font-bold md:text-[2rem] mb-1'>
{items.length === 0? "Your Amazon Cart is empty": "Shoping Basket"}
</h1>
<p className='text-[#007185] hover:text-red-600 cursor-pointer hover:underline hover'>Shop today's deals</p>
</div>
</div>
<div className='mx-10 bg-white '>
{items.length !== 0 && `You have ${items.length} items in your busket.`}
{items.map(({item, i}: any) => {
<CheckOutProduct
key={i}
image={item.image}
price={item.price}/>
})}
</div>
</div>
)}
</main>
</div>
)
}
checkOutProduct.tsx
import Image from 'next/image'
import React from 'react'
export default function CheckOutProduct({ id,title,image,description,price,category }: any) {
return (
<div className='grid grid-cols-5'>
<Image src={image} height={200} width={200} alt=""/>
<p>{price}</p>
</div>
)
}

Answer 1

Try to add like below because concat will not change object reference since updated values will not show in component.
addToBasket: (state, action) => {
state.items = [...state.items, ...action.payload];
}