according to what qtguru is pointing out... I don't know the full build of your code... i just typed out and using console.log, but you could try this out for your original reducer.

const reducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
let eachCart;
eachCart = state.products.map((product) => {
if (product.id === action.payload) {
return { ...product, amount: product.amount + 1 };
}
return product;
});
return { ...state, products: eachCart };
default:
return state;
}
};

well if nonwork... na just suggestions bye .

Devdevdev:


I did, got a big, fat error.

it was just a suggestion

since you said your number type was changing to something else which might be the cause of your issues.

Number() converts a value to a number

GREATIGBOMAN:
according to what qtguru is pointing out... I don't know the full build of your code... i just typed out and using console.log, but you could try this out for your original reducer.

const reducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
let eachCart;
eachCart = state.products.map((product) => {
if (product.id === action.payload) {
return { ...product, amount: product.amount + 1 };
}
return product;
});
return { ...state, products: eachCart };
default:
return state;
}
};

well if nonwork... na just suggestions bye .

Didn't work.

qtguru:
Your code is wrong. Fix those issues I pointed out, A reducer should always return a new state always

I tried implementing your instruction. Still didn't work.

GREATIGBOMAN:


it was just a suggestion

since you said your number type was changing to something else which might be the cause of your issues.

Number() converts a value to a number

I even used parseInt, and + sign before the variable, still didn't work.

Devdevdev:


I tried implementing your instruction. Still didn't work.

could u upload the the code somewhere so i can download it, will be easier
just zip the file and upload to googledrive and share the link.

Devdevdev:


I tried implementing your instruction. Still didn't work.

Put a debugger and see if you reach the reducer, send the project to my mail, let me run it and fix. coding by looking at image is long thing.

@GreatIgboMan, do you have an email address? I'll mail the code to you and qtguru now.

Devdevdev:
@GreatIgboMan, do you have an email address? I'll mail the code to you and qtguru now.

OKEOWOADEREMI AT GMAIL DOT COM

Devdevdev:
@GreatIgboMan, do you have an email address? I'll mail the code to you and qtguru now.

_ @ gmail. com

Devdevdev:
Guys I am creating this ecommerce store app using context api and useReducer for state management. I am trying to increase the quantity of each item using the "amount" variable, but for some reason it is not working. I have examined and re-examined the logic in the reducer function and it seems okay, but yet when i click on the button in my shop page, nothing happens. It doesn't event return an error. I'm really confused. Can someone look through the code and tell me where the bug is?? Thanks.

edit: I refractored the code using redux tool kit and I am still having the same issue. Omo!

Also here, is it not better to name it product.quantity instead product.amount since it's the quantity you are trying to increase?

i'm assuming your product object will have a quantity and an amount?

if your product has a quantity in its object, then there's nowhere in the code above you are actually increasing it, instead it is the amount(Price) of the product you are increasing.

Maybe I'm wrong... But I don't see any correlation between the quantity& amount and how the amount should increase the quantity.


Instead it's the change in quantity that should increase the total amount

qtguru:

OKEOWOADEREMI AT GMAIL DOT COM

Sent

GREATIGBOMAN:

_ @ gmail. com

Sent

Devdevdev:


Sent

i sha replied u.
check your spam/inbox

Devdevdev:


Sent

This won't work, I don't have the package.json, you were supposed to send the whole project so I can install the modules and run on my end.

Devdevdev:
So no one can help me? I've seen reactjs, truthcoder and qtguru view this thread.

Share the code repository

GitHub was invented for this reason.

truthCoder:


Share the code repository

GitHub was invented for this reason.

Exactly taking too much time to fix a bug like this, we could have ironed it out with github.

A lot of stuff is wrong with your code. I don't think you should be setting the amount and total variable from the reducer page, that should be done at the Shop.jsx page. A lot needs to change from your code for it to work.

With your amount variable set at the reducer page, every time you run the addOne function, your amount will refactor to 0, except you are getting your values from localStorage

DDayve:
A lot of stuff is wrong with your code. I don't think you should be setting the amount and total variable from the reducer page, that should be done at the Shop.jsx page. A lot needs to change from your code for it to work.

With your amount variable set at the reducer page, every time you run the addOne function, your amount will refactor to 0, except you are getting your values from localStorage

What else is wrong with the code asides from the amount variable being set at the reducer page?

Devdevdev:


What else is wrong with the code asides from the amount variable being set at the reducer page?

Let's see your action screen where you created cartItems

Devdevdev:


What else is wrong with the code asides from the amount variable being set at the reducer page?

Please, is this amount the same thing as the quantity?

Like is it the quantity of the product you clicked (Add to Cart) you are trying to increase?
if so then your code setup is not correct.

Did you push it to Github ? this can be solved faster if shared.

GREATIGBOMAN:


Please, is this amount the same thing as the quantity?

Like is it the quantity of the product you clicked (Add to Cart) you are trying to increase?
if so then your code setup is not correct.

I just watched a tutorial on git and github and just uploaded the two projects on github. This is my first time using github.

https://github.com/devdevdev69

@qtguru, i took your advice and pushed the two projects to github. You will find them on my github profile

https://github.com/devdevdev69

Devdevdev:
@qtguru, i took your adviced and pushed the two projects to github. You will find them on my github profile

https://github.com/devdevdev69

Awesome, let me clone

Devdevdev:


I just watched a tutorial on git and github and just uploaded the two projects on github. This is my first time using github.

https://github.com/devdevdev69

I emailed u what I believe is what u were trying to achieve... Attached a video.
U can check it out if it's what u wanted

Devdevdev:


I just watched a tutorial on git and github and just uploaded the two projects on github. This is my first time using github.

https://github.com/devdevdev69

Well. in your Global context (In context API version)
just replace you reducer function with this:

const reducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
let eachCart;
eachCart = state.products.map((product) => {
if (product.id === action.payload) {
return { ...product, amount: (product.amount || 0) + 1 };
}
return product;
});

return { ...state, products: eachCart, amount: 0 };

default:
return state;
}
};



in Shop.jsx



in Shop.jsx

add this inside the <button> tag.


Add to cart ({product.amount || 0})

is this what you are trying to achieve?

GREATIGBOMAN:

Well. in your Global context (In context API version)
just replace you reducer function with this:

const reducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
let eachCart;
eachCart = state.products.map((product) => {
if (product.id === action.payload) {
return { ...product, amount: (product.amount || 0) + 1 };
}
return product;
});

return { ...state, products: eachCart, amount: 0 };

default:
return state;
}
};



in Shop.jsx



in Shop.jsx

add this inside the <button> tag.


Add to cart ({product.amount || 0})

This worked. Thanks a lot. It wasn't clicking because the amount was set to zero so adding the product.amount || 0 and telling the compiler to add 1 when the state is 0 or when there is an amount, did the trick.

I also included the modification to the redux code and it worked.

@devdevdev

I noticed I made some mistake in my comments, I used combinedReducer, you used createSlice, createSlice handle the type and action on it's on, so the name + reducer function is triggered, look the screenshot your code works.

The payload is logged to the console, so the next part is to experiment with the Cart component and see if it reflects there

WIP

truthCoder2:
is this what you are trying to achieve?

Yea