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!

Please someone should help me sort this out, I am having headache already, and I don't tend to stop until I've figured shit out.

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

looking..

Why not use the debugger to enter the call stack and see if it hits the reducer, it's hard to debug at face value, is it online ?

debug the addOne method, if you can jump on Google meet or hit us on our slack.

@devdevdev

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.

Have you tried to return the eachCart variable?

qtguru:
Why not use the debugger to enter the call stack and see if it hits the reducer, it's hard to debug at face value, is it online ?

I switched to redux tool kit and I am still having the same issue. The clearCart and removeItem functionality are working just fine. It's just the addOne that isn't. I think the issue is with the 'amount' variable and how it's state is getting altered. I am seriously confused.

Karleb:


Have you tried to return the eachCart variable?

I already did within the reducer function

In the initial state, the amount has the type of number, but when I do the "cartItem.amount" , the amount changes to the type "any" and hence can not compute as it isn't a type number

Someone should help me figure this out, I am seriously about to start crying.

GREATIGBOMAN, help me solve this issue and you will have my respect, and I will officially apologize for all the insults. I might even get you a gift.

Devdevdev:
GREATIGBOMAN, help me solve this issue and you will have my respect, and I will officially apologize for all the insults. I might even get you a gift.

I don't need any apologies.

If u are committing the code somewhere just send the link let me clone it.

GREATIGBOMAN:


I don't need any apologies.

If u are committing the code somewhere just send the link let me clone it.

I am not committing the code anywhere, for now. It's a pretty straight forward code, especially with the redux tool kit. Just replicate the functionality, please.

Devdevdev:


I switched to redux tool kit and I am still having the same issue. The clearCart and removeItem functionality are working just fine. It's just the addOne that isn't. I think the issue is with the 'amount' variable and how it's state is getting altered. I am seriously confused.

want to jump on google meeting, it's hard to debug on image

also the item.id === payload what is that logic ?

Try to log out cartItem and the payload too. That might give you a clue.

Devdevdev:
In the initial state, the amount has the type of number, but when I do the "cartItem.amount" , the amount changes to the type "any" and hence can not compute as it isn't a type number

Someone should help me figure this out, I am seriously about to start crying.

Try wrapping this in Number(cartItem.amount)

This is how the Dispatch is, it requires a type, also the point of the reducer is to return a new object combined from previous state and new update. What you're doing is an impure function. Look at this code i uploaded.

qtguru:
also the item.id === payload what is that logic ?

I am looking for an item from the cart that the id matches the action.payload. The payload is the information that is dispatched to the button that is clicked when i import the useDispatch( ) function. In this case, the product.id from my data is the payload. The action is the command passed.

When you call a Dispatcher, it uses the type to know which reducer to call, it expects a return value, but you are doing a side-effect instead of returning something like this e.g
{...state,newProps}

GREATIGBOMAN:


Try wrapping this in Number(cartItem.amount)

I did, got a big, fat error.

The value return becomes the new state, and triggers every component listening to that, allowing them to receive the new copy. Try my suggestion.

Do this in your reducer. e.g return {...state, {amount: action.payload | value }} something like that

Devdevdev:

You are using useDispatch wrong, because your code won't know which reducer to call I think

Get rid of the Context, you're already using Redux Hooks, you don't need it. Just use only Redux, let each component query the reducer it needs.

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!

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 { ...state, products: eachCart };
});
default:
return state;
}
};

replace your reducer with this and try:

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

qtguru:
Get rid of the Context, you're already using Redux Hooks, you don't need it. Just use only Redux, let each component query the reducer it needs.

I already did. Still same issue.

Devdevdev:


I already did. Still same issue.

1. You didn't refactor the reducer to return a new state

2. your dispatch is meant to take an object , you also didn't change that too

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