score:0
if you are using sanity in your project follow the code below, it will update your quantity instead of adding the same product again in the cart, if you are not using sanity have a look at the code below i am sure it will give you some ideas to solve your problem.
update your cartslice
with the code below :
const initialstate = {
product: [],
};
export const cartslice = createslice({
name: 'cart',
initialstate,
reducers: {
addproduct: (state, { payload }) => {
let newitem = payload;
const existitem = state.products.find((item) => item._id === payload._id);
state.products = existitem ? state.products.map((item) => item._id === existitem._id ? newitem : item) : [...state.products, newitem]
}
},
})
in the the page you want to use the reducer in add this:
const { products } = useselector(store => store.cart)
const addtocart = () => {
let cartitem = products.find(item => item._id === product._id)
let quantity = cartitem ? cartitem.quantity + 1 : 1;
dispatch(() => addproduct({
_id: product._id,
name: product.name,
size: product.size,
category: product.slug.current,
price: product.price,
image: urlfor(product.image),
quantity
}))
}
addtocart
is an onclick
function, you do not need to add quantity property to your json file or the api it will be added when the product is selected to be in cart. the quantity above it will check if the item does not exist in the cart the quantity will be 1 and it will be added to the object of the product item, if the item does exist in the cart it will update the quantity by one.
now everything should work just fine. if you had an error please feel free to message me, i would be more than happy to help you
score:1
assuming that there is a quantity
property on your product:
addproduct: (state, action) => {
const item = state.product.find((pro) => pro._id === action.payload._id)
if (item) {
item.quantity++
} else {
state.product.push(action.payload)
}
},
Source: stackoverflow.com
Related Query
- How to prevent duplicate items in redux store?
- How to prevent duplicate items in array?
- How can I prevent a duplicate on Redux when using the spread operator?
- How can I store items by id in Redux Store
- How to prevent adding duplicate items to cart using react
- How to listen for specific property changes in Redux store after an action is dispatched
- How do you add/remove to a redux store generated with normalizr?
- Redux How to update the store in unit tests?
- How to Implement dynamic routing in routes.js for generated menu items in sidebar in universal react redux boilerplate by erikras
- How to update the Redux store after Apollo GraphQL query returns
- How to reset state of Redux Store when using configureStore from @reduxjs/toolkit?
- Jest/Enzyme Unit Testing: How to pass store to shallow component that uses redux 4 and react-redux 6 connect function
- How to unsubscribe from redux store when component will unmount? How to decorate redux connect?
- How do I use local state along with redux store state in the same react component?
- Javascript Redux - how to get an element from store by id
- React Native: HeadslessJS and Redux - How to access store from task
- How to get content of Redux store in console without devtools?
- How to hydrate redux store after login?
- How to connect to redux store from react-router onEnter hook?
- How to connect simple Formik form with Redux store and dispatch an action?
- How to share redux store in micro frontend architecture?
- prevent duplicate objects being added to state react redux
- How should I update redux store during a react-router transition?
- How to expose/access a data store like Redux within a cypress test?
- redux - how to store and update a key/value pair
- How to access the Redux store outside of a component in React
- how to save array object data in redux store
- How to share redux store in multiple components
- MUI: How to prevent Grid items from going on next row?
- Reactjs and redux - How to prevent excessive api calls from a live-search component?
More Query from same tag
- React state not updating after fetch .then statement
- React typescript hashmap title as key and values inside
- React Change inner function of parent component using functional component
- REACT JS FIREBASE- how to display multiple selected radio button in one form?
- How to add field to upload image by Redux Form?
- React - useMemo giving warning although program is running fine. (useMemo has an unnecessary dependency)
- Click on <div> to focus <input> (React)
- currencyDisplay must be either "code", "symbol", or "name" - Safari issue
- Should refs be in listed as dependencies for useEffect and such?
- React-select cypress
- reactjs - interrupting a post request in superagent
- Component array state added element gets deleted
- Trying to find the time difference (in minutes) from a given time and the current time now in my React application
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- Routing not working in a webpack + react project
- Checking one conditional React prop does not satisfy TS
- Increase and Decrease the values
- React Material Ui and react router
- Array store the same value in React?
- How to access DOM event-handlers for JSX-components in server-sided React
- Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none
- React parsing function inside component as React Element
- React useContext hook: context becomes null on page reload
- Abnormal behaviour of radio button when click
- How to load icons dynamically in Next.js?
- Is it OK to put propTypes and defaultProps as static props inside React class?
- React typescript pass value from slider to styled-component
- How to allow a function argument to dynamically only be one value from a typescript interface?
- How can I utilise ApplicationInsights-JS in a service worker?
- useState Hook inside loop or conditional statement