how to add quantity with product item in Reducer ADD_TO_CART using React Redux
0
CartReducer.js
export default function cartReducer(state = {cart: ,qty:1 }, action) {
switch (action.type) {
case ADD_TO_CART:
if (state.cart.indexOf(action.product) !== -1) {
return state // i want add quantity with increment (qty++)
}
return { cart:[...state.cart, action.product] } // send qty with cart
case REMOVE_FROM_CART:
return {
cart: state.cart.filter(id => id !== action.product_id)
}
default:
}
retrun state;
}
i want to pass quantity with product item and if same item clicked multi-time (AddToCart) then increase Quantity (qty++)
Please Help Me...
reactjs redux shopping-cart reducers
asked Nov 27 '18 at 6:08
Praveen GopaganiPraveen Gopagani
13
add a comment |
0
CartReducer.js
export default function cartReducer(state = {cart: ,qty:1 }, action) {
switch (action.type) {
case ADD_TO_CART:
if (state.cart.indexOf(action.product) !== -1) {
return state // i want add quantity with increment (qty++)
}
return { cart:[...state.cart, action.product] } // send qty with cart
case REMOVE_FROM_CART:
return {
cart: state.cart.filter(id => id !== action.product_id)
}
default:
}
retrun state;
}
i want to pass quantity with product item and if same item clicked multi-time (AddToCart) then increase Quantity (qty++)
Please Help Me...
reactjs redux shopping-cart reducers
asked Nov 27 '18 at 6:08
Praveen GopaganiPraveen Gopagani
13
add a comment |
0
0
0
CartReducer.js
export default function cartReducer(state = {cart: ,qty:1 }, action) {
switch (action.type) {
case ADD_TO_CART:
if (state.cart.indexOf(action.product) !== -1) {
return state // i want add quantity with increment (qty++)
}
return { cart:[...state.cart, action.product] } // send qty with cart
case REMOVE_FROM_CART:
return {
cart: state.cart.filter(id => id !== action.product_id)
}
default:
}
retrun state;
}
i want to pass quantity with product item and if same item clicked multi-time (AddToCart) then increase Quantity (qty++)
Please Help Me...
reactjs redux shopping-cart reducers
asked Nov 27 '18 at 6:08
Praveen GopaganiPraveen Gopagani
13
CartReducer.js
export default function cartReducer(state = {cart: ,qty:1 }, action) {
switch (action.type) {
case ADD_TO_CART:
if (state.cart.indexOf(action.product) !== -1) {
return state // i want add quantity with increment (qty++)
}
return { cart:[...state.cart, action.product] } // send qty with cart
case REMOVE_FROM_CART:
return {
cart: state.cart.filter(id => id !== action.product_id)
}
default:
}
retrun state;
}
i want to pass quantity with product item and if same item clicked multi-time (AddToCart) then increase Quantity (qty++)
Please Help Me...
reactjs redux shopping-cart reducers
reactjs redux shopping-cart reducers
asked Nov 27 '18 at 6:08
Praveen GopaganiPraveen Gopagani
13
asked Nov 27 '18 at 6:08
Praveen GopaganiPraveen Gopagani
13
asked Nov 27 '18 at 6:08
Praveen GopaganiPraveen Gopagani
13
asked Nov 27 '18 at 6:08
Praveen GopaganiPraveen Gopagani
13
asked Nov 27 '18 at 6:08
Praveen GopaganiPraveen Gopagani
13
13
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
First of all, an action should always have a type and a payload, where the payload is an object containing your data, in this case the product.
Secondly, the quantity should be a part of every product in your cart array, that way you can keep track of every product.
Than, I would do the following:
const { type, payload } = action // extract the type and payload before the switch statement
case ADD_TO_CART: {
const productId = payload.product.id
if (state.cart.findIndex(product => product.id === productId) !== -1) {
const cart = state.cart.reduce((cartAcc, product) => {
if (product.id === productId) {
cartAcc.push({ ...product, qty: product.qty++ }) // Increment qty
} else {
cartAcc.push(product)
}
return cartAcc
}, )
return { ...state, cart }
}
return { ...state, cart: [...state.cart, { ...payload.product, qty: 0 }] }
}answered Nov 27 '18 at 8:40
kubykuby
34638
Not Working, Uncaught TypeError: 20 is not a function at Array.findIndex (<anonymous>)
– Praveen Gopagani
Nov 28 '18 at 8:05
Yeah, I updated my answer, I wrote this script quickly and haven't tested it... findIndex must have a function for comparing and it had only the value, now it should work, but please think about what this code does, not just copy/paste it.
– kuby
Nov 29 '18 at 7:37
hurray... it's Working, Thank You Very much, exactly i want this. but qty++ not working i changed to qty+1 any way thank you again
– Praveen Gopagani
Nov 30 '18 at 6:04
Sure, you are welcome.
– kuby
Dec 3 '18 at 9:01
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53493695%2fhow-to-add-quantity-with-product-item-in-reducer-add-to-cart-using-react-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
First of all, an action should always have a type and a payload, where the payload is an object containing your data, in this case the product.
Secondly, the quantity should be a part of every product in your cart array, that way you can keep track of every product.
Than, I would do the following:
const { type, payload } = action // extract the type and payload before the switch statement
case ADD_TO_CART: {
const productId = payload.product.id
if (state.cart.findIndex(product => product.id === productId) !== -1) {
const cart = state.cart.reduce((cartAcc, product) => {
if (product.id === productId) {
cartAcc.push({ ...product, qty: product.qty++ }) // Increment qty
} else {
cartAcc.push(product)
}
return cartAcc
}, )
return { ...state, cart }
}
return { ...state, cart: [...state.cart, { ...payload.product, qty: 0 }] }
}answered Nov 27 '18 at 8:40
kubykuby
34638
Not Working, Uncaught TypeError: 20 is not a function at Array.findIndex (<anonymous>)
– Praveen Gopagani
Nov 28 '18 at 8:05
Yeah, I updated my answer, I wrote this script quickly and haven't tested it... findIndex must have a function for comparing and it had only the value, now it should work, but please think about what this code does, not just copy/paste it.
– kuby
Nov 29 '18 at 7:37
hurray... it's Working, Thank You Very much, exactly i want this. but qty++ not working i changed to qty+1 any way thank you again
– Praveen Gopagani
Nov 30 '18 at 6:04
Sure, you are welcome.
– kuby
Dec 3 '18 at 9:01
add a comment |
0
First of all, an action should always have a type and a payload, where the payload is an object containing your data, in this case the product.
Secondly, the quantity should be a part of every product in your cart array, that way you can keep track of every product.
Than, I would do the following:
const { type, payload } = action // extract the type and payload before the switch statement
case ADD_TO_CART: {
const productId = payload.product.id
if (state.cart.findIndex(product => product.id === productId) !== -1) {
const cart = state.cart.reduce((cartAcc, product) => {
if (product.id === productId) {
cartAcc.push({ ...product, qty: product.qty++ }) // Increment qty
} else {
cartAcc.push(product)
}
return cartAcc
}, )
return { ...state, cart }
}
return { ...state, cart: [...state.cart, { ...payload.product, qty: 0 }] }
}answered Nov 27 '18 at 8:40
kubykuby
34638
Not Working, Uncaught TypeError: 20 is not a function at Array.findIndex (<anonymous>)
– Praveen Gopagani
Nov 28 '18 at 8:05
Yeah, I updated my answer, I wrote this script quickly and haven't tested it... findIndex must have a function for comparing and it had only the value, now it should work, but please think about what this code does, not just copy/paste it.
– kuby
Nov 29 '18 at 7:37
hurray... it's Working, Thank You Very much, exactly i want this. but qty++ not working i changed to qty+1 any way thank you again
– Praveen Gopagani
Nov 30 '18 at 6:04
Sure, you are welcome.
– kuby
Dec 3 '18 at 9:01
add a comment |
0
0
0
First of all, an action should always have a type and a payload, where the payload is an object containing your data, in this case the product.
Secondly, the quantity should be a part of every product in your cart array, that way you can keep track of every product.
Than, I would do the following:
const { type, payload } = action // extract the type and payload before the switch statement
case ADD_TO_CART: {
const productId = payload.product.id
if (state.cart.findIndex(product => product.id === productId) !== -1) {
const cart = state.cart.reduce((cartAcc, product) => {
if (product.id === productId) {
cartAcc.push({ ...product, qty: product.qty++ }) // Increment qty
} else {
cartAcc.push(product)
}
return cartAcc
}, )
return { ...state, cart }
}
return { ...state, cart: [...state.cart, { ...payload.product, qty: 0 }] }
}answered Nov 27 '18 at 8:40
kubykuby
34638
First of all, an action should always have a type and a payload, where the payload is an object containing your data, in this case the product.
Secondly, the quantity should be a part of every product in your cart array, that way you can keep track of every product.
Than, I would do the following:
const { type, payload } = action // extract the type and payload before the switch statement
case ADD_TO_CART: {
const productId = payload.product.id
if (state.cart.findIndex(product => product.id === productId) !== -1) {
const cart = state.cart.reduce((cartAcc, product) => {
if (product.id === productId) {
cartAcc.push({ ...product, qty: product.qty++ }) // Increment qty
} else {
cartAcc.push(product)
}
return cartAcc
}, )
return { ...state, cart }
}
return { ...state, cart: [...state.cart, { ...payload.product, qty: 0 }] }
}const { type, payload } = action // extract the type and payload before the switch statement
case ADD_TO_CART: {
const productId = payload.product.id
if (state.cart.findIndex(product => product.id === productId) !== -1) {
const cart = state.cart.reduce((cartAcc, product) => {
if (product.id === productId) {
cartAcc.push({ ...product, qty: product.qty++ }) // Increment qty
} else {
cartAcc.push(product)
}
return cartAcc
}, )
return { ...state, cart }
}
return { ...state, cart: [...state.cart, { ...payload.product, qty: 0 }] }
}const { type, payload } = action // extract the type and payload before the switch statement
case ADD_TO_CART: {
const productId = payload.product.id
if (state.cart.findIndex(product => product.id === productId) !== -1) {
const cart = state.cart.reduce((cartAcc, product) => {
if (product.id === productId) {
cartAcc.push({ ...product, qty: product.qty++ }) // Increment qty
} else {
cartAcc.push(product)
}
return cartAcc
}, )
return { ...state, cart }
}
return { ...state, cart: [...state.cart, { ...payload.product, qty: 0 }] }
}answered Nov 27 '18 at 8:40
kubykuby
34638
edited Nov 29 '18 at 7:35
answered Nov 27 '18 at 8:40
kubykuby
34638
answered Nov 27 '18 at 8:40
kubykuby
34638
answered Nov 27 '18 at 8:40
kubykuby
34638
34638
Not Working, Uncaught TypeError: 20 is not a function at Array.findIndex (<anonymous>)
– Praveen Gopagani
Nov 28 '18 at 8:05
Yeah, I updated my answer, I wrote this script quickly and haven't tested it... findIndex must have a function for comparing and it had only the value, now it should work, but please think about what this code does, not just copy/paste it.
– kuby
Nov 29 '18 at 7:37
hurray... it's Working, Thank You Very much, exactly i want this. but qty++ not working i changed to qty+1 any way thank you again
– Praveen Gopagani
Nov 30 '18 at 6:04
Sure, you are welcome.
– kuby
Dec 3 '18 at 9:01
add a comment |
Not Working, Uncaught TypeError: 20 is not a function at Array.findIndex (<anonymous>)
– Praveen Gopagani
Nov 28 '18 at 8:05
Yeah, I updated my answer, I wrote this script quickly and haven't tested it... findIndex must have a function for comparing and it had only the value, now it should work, but please think about what this code does, not just copy/paste it.
– kuby
Nov 29 '18 at 7:37
hurray... it's Working, Thank You Very much, exactly i want this. but qty++ not working i changed to qty+1 any way thank you again
– Praveen Gopagani
Nov 30 '18 at 6:04
Sure, you are welcome.
– kuby
Dec 3 '18 at 9:01
Not Working, Uncaught TypeError: 20 is not a function at Array.findIndex (<anonymous>)
– Praveen Gopagani
Nov 28 '18 at 8:05
Not Working, Uncaught TypeError: 20 is not a function at Array.findIndex (<anonymous>)
– Praveen Gopagani
Nov 28 '18 at 8:05
Yeah, I updated my answer, I wrote this script quickly and haven't tested it... findIndex must have a function for comparing and it had only the value, now it should work, but please think about what this code does, not just copy/paste it.
– kuby
Nov 29 '18 at 7:37
Yeah, I updated my answer, I wrote this script quickly and haven't tested it... findIndex must have a function for comparing and it had only the value, now it should work, but please think about what this code does, not just copy/paste it.
– kuby
Nov 29 '18 at 7:37
hurray... it's Working, Thank You Very much, exactly i want this. but qty++ not working i changed to qty+1 any way thank you again
– Praveen Gopagani
Nov 30 '18 at 6:04
hurray... it's Working, Thank You Very much, exactly i want this. but qty++ not working i changed to qty+1 any way thank you again
– Praveen Gopagani
Nov 30 '18 at 6:04
Sure, you are welcome.
– kuby
Dec 3 '18 at 9:01
Sure, you are welcome.
– kuby
Dec 3 '18 at 9:01
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53493695%2fhow-to-add-quantity-with-product-item-in-reducer-add-to-cart-using-react-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
