useSelector rendering infinitely - reactjs

Question

When trying to set value equal to state value using useSelector value is reassigned again and again.
code below console logs quantities infintely
const quantities = useSelector((state) => state.cart.quantity) console.log(quantities)
Cart slice:
import { createSlice } from '#reduxjs/toolkit'
const cartSlice = createSlice({
name: 'cart',
initialState: {
products: [],
quantity: 0,
total: 0,
},
reducers: {
addProduct: (state, action) => {
state.quantity += 1
state.products.push(action.payload)
state.total += action.payload.price * action.payload.quantity
},
},
})
export const { addProduct } = cartSlice.actions
export default cartSlice.reducer
Store.js
import { configureStore, combineReducers } from '#reduxjs/toolkit'
import cartReducer from './cartRedux'
import userReducer from './userRedux'
import {
persistStore,
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig = {
key: 'root',
version: 1,
storage,
}
const rootReducer = combineReducers({ user: userReducer, cart: cartReducer })
const persistedReducer = persistReducer(persistConfig, rootReducer)
export const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}),
})
export let persistor = persistStore(store)
entire component
import { Search, ShoppingCartOutlined } from '#material-ui/icons'
import React from 'react'
import styled from 'styled-components'
import { mobile } from '../responsive'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import _ from 'underscore'
const Container = styled.div`
height: 60px;
${mobile({ height: '50px' })}
`
const Wrapper = styled.div`
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
${mobile({ padding: '10px 0px' })}
`
const Left = styled.div`
flex: 1;
display: flex;
align-items: center;
`
const Language = styled.span`
font-size: 14px;
cursor: pointer;
${mobile({ display: 'none' })}
`
const SearchContainer = styled.div`
border: 0.5px solid lightgray;
display: flex;
align-items: center;
margin-left: 25px;
padding: 5px;
`
const Input = styled.input`
border: none;
${mobile({ width: '50px' })}
`
const Center = styled.div`
flex: 1;
text-align: center;
`
const Logo = styled.h1`
font-weight: bold;
${mobile({ fontSize: '24px' })}
`
const Right = styled.div`
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
${mobile({ flex: 2, justifyContent: 'center' })}
`
const MenuItem = styled.div`
font-size: 14px;
cursor: pointer;
margin-left: 25px;
${mobile({ fontSize: '12px', marginLeft: '10px' })}
`
const Navbar = () => {
const quantities = useSelector((state) => state.cart.quantity)
console.log(quantities)
return (
<Container>
<Wrapper>
<Left>
<Language>EN</Language>
<SearchContainer>
<Input placeholder='Search' />
<Search style={{ color: 'gray', fontSize: 16 }} />
</SearchContainer>
</Left>
<Center>
<Logo>LAMA.</Logo>
</Center>
<Right>
<MenuItem>REGISTER</MenuItem>
<MenuItem>SIGN IN</MenuItem>
<Link to='/cart'>
<MenuItem>
<Badge badgeContent={quantities} color='primary'>
<ShoppingCartOutlined />
</Badge>
</MenuItem>
</Link>
</Right>
</Wrapper>
</Container>
)
}
export default Navbar
Ancestor component
import styled from 'styled-components'
import Announcement from '../components/Announcement'
import Footer from '../components/Footer'
import Navbar from '../components/Navbar'
import Newsletter from '../components/Newsletter'
import { mobile } from '../responsive'
import { useState } from 'react'
import { useEffect } from 'react'
import { publicRequest } from '../requestMethods'
import { Link, useLocation } from 'react-router-dom'
const Container = styled.div``
const Wrapper = styled.div`
padding: 50px;
display: flex;
${mobile({ padding: '10px', flexDirection: 'column' })}
`
const ImgContainer = styled.div`
flex: 1;
`
const Image = styled.img`
width: 100%;
height: 90vh;
object-fit: cover;
${mobile({ height: '40vh' })}
`
const InfoContainer = styled.div`
flex: 1;
padding: 0px 50px;
${mobile({ padding: '10px' })}
`
const Title = styled.h1`
font-weight: 200;
`
const Desc = styled.p`
margin: 20px 0px;
`
const Price = styled.span`
font-weight: 100;
font-size: 40px;
`
const FilterContainer = styled.div`
width: 50%;
margin: 30px 0px;
display: flex;
justify-content: space-between;
${mobile({ width: '100%' })}
`
const Filter = styled.div`
display: flex;
align-items: center;
`
const FilterTitle = styled.span`
font-size: 20px;
font-weight: 200;
`
const FilterColor = styled.div`
width: 20px;
height: 20px;
border-radius: 50%;
background-color: ${(props) => props.color};
margin: 0px 5px;
cursor: pointer;
`
const FilterSize = styled.select`
margin-left: 10px;
padding: 5px;
`
const FilterSizeOption = styled.option``
const AddContainer = styled.div`
width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
${mobile({ width: '100%' })}
`
const AmountContainer = styled.div`
display: flex;
align-items: center;
font-weight: 700;
`
const Amount = styled.span`
width: 30px;
height: 30px;
border-radius: 10px;
border: 1px solid teal;
display: flex;
align-items: center;
justify-content: center;
margin: 0px 5px;
`
const Button = styled.button`
padding: 15px;
border: 2px solid teal;
background-color: white;
cursor: pointer;
font-weight: 500;
&:hover {
background-color: #f8f4f4;
}
`
const Product = () => {
const location = useLocation()
const id = location.pathname.split('/')[2]
const [product, setProduct] = useState({})
const [quantity, setQuantity] = useState(1)
const [color, setColor] = useState('')
const [size, setSize] = useState('')
useEffect(() => {
const getProduct = async () => {
try {
const res = await publicRequest.get('/product/find/' + id)
setProduct(res.data)
} catch {}
}
getProduct()
})
const handleQuantity = (type) => {
if (type === 'dec') {
quantity > 1 && setQuantity(quantity - 1)
} else {
setQuantity(quantity + 1)
}
}
const handleClick = () => {
//update cart
}
return (
<Container>
<Navbar />
<Announcement />
<Wrapper>
<ImgContainer>
<Image src={product.img} />
</ImgContainer>
<InfoContainer>
<Title>{product.title}</Title>
<Desc>{product.desc}</Desc>
<Price>{product.Price}</Price>
<FilterContainer>
<Filter>
<FilterTitle>Color</FilterTitle>
{product.color?.map((c) => (
<FilterColor
color={c}
key={c}
onClick={() => {
setColor(c)
}}
/>
))}
</Filter>
<Filter>
<FilterTitle>Size</FilterTitle>
<FilterSize>
{product.size?.map((s) => (
<FilterSizeOption
key={s}
onChange={(e) => {
setSize(e.target.value)
}}
>
{s}
</FilterSizeOption>
))}
</FilterSize>
</Filter>
</FilterContainer>
<AddContainer>
<AmountContainer>
<Remove onClick={() => handleQuantity('dec')} />
<Amount>{quantity}</Amount>
<Add onClick={() => handleQuantity('inc')} />
</AmountContainer>
<Button onClick={handleClick}>ADD TO CART</Button>
</AddContainer>
</InfoContainer>
</Wrapper>
<Newsletter />
<Footer />
</Container>
)
}
export default Product
I am currently following an online tutorialenter code here but when he writes the same code it console.logs only once.
I even tried copy pasting his code still my code returns logs infinitely.
I just copied the ancestor component from the tutorial video github and it solved the problem but I don't know what was actually causing it if anyone can help
correct ancestor component
import styled from 'styled-components'
import Announcement from '../components/Announcement'
import Footer from '../components/Footer'
import Navbar from '../components/Navbar'
import Newsletter from '../components/Newsletter'
import { mobile } from '../responsive'
import { useLocation } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { publicRequest } from '../requestMethods'
import { addProduct } from '../redux/cartRedux'
import { useDispatch } from 'react-redux'
const Container = styled.div``
const Wrapper = styled.div`
padding: 50px;
display: flex;
${mobile({ padding: '10px', flexDirection: 'column' })}
`
const ImgContainer = styled.div`
flex: 1;
`
const Image = styled.img`
width: 100%;
height: 90vh;
object-fit: cover;
${mobile({ height: '40vh' })}
`
const InfoContainer = styled.div`
flex: 1;
padding: 0px 50px;
${mobile({ padding: '10px' })}
`
const Title = styled.h1`
font-weight: 200;
`
const Desc = styled.p`
margin: 20px 0px;
`
const Price = styled.span`
font-weight: 100;
font-size: 40px;
`
const FilterContainer = styled.div`
width: 50%;
margin: 30px 0px;
display: flex;
justify-content: space-between;
${mobile({ width: '100%' })}
`
const Filter = styled.div`
display: flex;
align-items: center;
`
const FilterTitle = styled.span`
font-size: 20px;
font-weight: 200;
`
const FilterColor = styled.div`
width: 20px;
height: 20px;
border-radius: 50%;
background-color: ${(props) => props.color};
margin: 0px 5px;
cursor: pointer;
`
const FilterSize = styled.select`
margin-left: 10px;
padding: 5px;
`
const FilterSizeOption = styled.option``
const AddContainer = styled.div`
width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
${mobile({ width: '100%' })}
`
const AmountContainer = styled.div`
display: flex;
align-items: center;
font-weight: 700;
`
const Amount = styled.span`
width: 30px;
height: 30px;
border-radius: 10px;
border: 1px solid teal;
display: flex;
align-items: center;
justify-content: center;
margin: 0px 5px;
`
const Button = styled.button`
padding: 15px;
border: 2px solid teal;
background-color: white;
cursor: pointer;
font-weight: 500;
&:hover {
background-color: #f8f4f4;
}
`
const Product = () => {
const location = useLocation()
const id = location.pathname.split('/')[2]
const [product, setProduct] = useState({})
const [quantity, setQuantity] = useState(1)
const [color, setColor] = useState('')
const [size, setSize] = useState('')
const dispatch = useDispatch()
useEffect(() => {
const getProduct = async () => {
try {
const res = await publicRequest.get('/product/find/' + id)
setProduct(res.data)
} catch {}
}
getProduct()
}, [id])
const handleQuantity = (type) => {
if (type === 'dec') {
quantity > 1 && setQuantity(quantity - 1)
} else {
setQuantity(quantity + 1)
}
}
const handleClick = () => {
dispatch(addProduct({ ...product, quantity, color, size }))
}
return (
<Container>
<Navbar />
<Announcement />
<Wrapper>
<ImgContainer>
<Image src={product.img} />
</ImgContainer>
<InfoContainer>
<Title>{product.title}</Title>
<Desc>{product.desc}</Desc>
<Price>$ {product.price}</Price>
<FilterContainer>
<Filter>
<FilterTitle>Color</FilterTitle>
{product.color?.map((c) => (
<FilterColor color={c} key={c} onClick={() => setColor(c)} />
))}
</Filter>
<Filter>
<FilterTitle>Size</FilterTitle>
<FilterSize onChange={(e) => setSize(e.target.value)}>
{product.size?.map((s) => (
<FilterSizeOption key={s}>{s}</FilterSizeOption>
))}
</FilterSize>
</Filter>
</FilterContainer>
<AddContainer>
<AmountContainer>
<Remove onClick={() => handleQuantity('dec')} />
<Amount>{quantity}</Amount>
<Add onClick={() => handleQuantity('inc')} />
</AmountContainer>
<Button onClick={handleClick}>ADD TO CART</Button>
</AddContainer>
</InfoContainer>
</Wrapper>
<Newsletter />
<Footer />
</Container>
)
}
export default Product