Type error: state.addcartdata not itrable

See more:

Javascript

ReactJS

Redux

I want to add to cart data but when I send an object from dispatch it does not itrate on Please give me a solution. I am posting my file

What I have tried:

//store
import { configureStore } from "@reduxjs/toolkit"
const initia_State = {
    products: [],
    value: [],
    inputSearch: [],
    Addproducts: [],
    AddCartData: []
}
const store = configureStore({
    reducer: (state, action) => {
console.log(state)
        const { type, payload } = action
        switch (type) {
            case 'put value':
                return {
                    value: payload.value,

                }
            case 'curValue':
                return {
                    inputSearch: payload.curVal
                }
            case 'mensShirt':
                return {
                    value: payload.shirt
                }
            case 'jewelery':
                return {
                    value: payload.jew
                }
            case 'fiterdata':
                return {
                    products: payload.fildata
                }
            case 'let product':
                return {
                    Addproducts: payload.data
                }
            case 'addcart value':
                const {product}=payload
                console.log(product)
//problem occurs here
                return {
                    ...state,
                   Addproducts:[...state.Addproducts,{...product}]
                }
                case 'all products':
                    return{
                        value:payload.All
                    }


        }
        return initia_State
    }
})
export default store<pre lang="Javascript">

//Homepage.jsx

import "../App.css"

import { useState, useEffect } from "react";
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";


const HomePage = () => {
    const dispatch = useDispatch()

    const selector = useSelector((state) => {
        return {
            val: state.value,
            products: state.Addproducts

        }
    })
    const { val, products } = selector

    const [newproducts, updatenewproduct] = useState([]);
    const [filterValue, setFilterValue] = useState([]);
    useEffect(() => {
        updatenewproduct(products)
    }, [products])


    const findMobile = ({ target }) => {

        let jew = target.value
        dispatch({
            type: 'jewelery',
            payload: { jew }
        })
    }
    const findShirt = ({ target }) => {

        let shirt = target.value
        dispatch({
            type: "mensShirt",
            payload: { shirt }
        })
    }
    const allProduct = ({ target }) => {
        //updateValue(target.value)
        let All = target.value
        dispatch({
            type: "all products",
            payload: { All }
        })

    }




    useEffect(() => {

        const fildata = newproducts.filter((filitem) => {
            switch (val) {
                case 'All':
                    return filitem

                case 'jewelery':
                    return filitem.category === val

                case "men's clothing":
                    return filitem.category === val
                default:
                    return filitem.title.match(val)

            }
        })
        setFilterValue(fildata)


    }, [val, products])

    const handleAddcart = (product) => {

// I dispatch here object in product

        dispatch({
            type: 'addcart value',
            payload: {product }
        })

    }
    return (
        <>

            <Container className="container" maxWidth="100%" zIndex='-1' >

                <Button value="jewelery" onClick={findMobile}>jewelery</Button>
                <Button value="men's clothing" onClick={findShirt}>men wear</Button>
                <Button value="All" onClick={allProduct}>All product</Button>
                <Box sx={{ flexGrow: 1 }} style={{ padding: "50px" }}>
                    <Grid container spacing={{ xs: 5, md: 12 }}
                        direction="row"
                        justifyContent="center"
                        alignItems="center"
                        margin="20">

                        {filterValue.length === 0 ? <div>no product available</div> : filterValue.map((product, k) => {
                            return (
                                <Grid item xs={4} sm={4} md={4} key={k}>
                                    <Card style={{ height: '100%' }} >
                                        <CardMedia
                                            className="card_comp"
                                            component="img"
                                            style={{
                                                height: '200px',
                                                width: '150px',
                                                margin: 'auto',
                                            }}
                                            image={product.image}
                                            alt="green iguana"

                                        />
                                        <CardContent style={{
                                            paddingBottom: "0%",
                                            maxHeight: "100px",
                                            overflow: "auto"
                                        }}>
                                            <Typography gutterBottom variant="h5" component="div">
                                                {product.title}
                                            </Typography>
                                            <Typography variant="body2" color="text.secondary">
                                                {product.description}
                                            </Typography>
                                            <Typography>{product.price}</Typography>
                                        </CardContent>
                                            <CardActions className="card-action">
//This button send product to store on Click event
                                            <Button size="small" onClick={() => handleAddcart(product)}
                                            >Add Cart</Button>
                                            <Button size="small" variant="contained" color="primary">Buy Now</Button>
                                        </CardActions>
                                    </Card>
                                </Grid>
                            )
                        })}
                    </Grid>
                </Box>
            </Container>

        </>
    )
}
export default HomePage