1

When I add the product to the cart and then I add another one, then if I try to add the first one again it doesn't increase only the quantity but it creates a new object for this product; how can I fix it

 switch (action.type) {
    case actionTypes.ADD_TO_CART:
      const product = state.products.find((p) => p.id === action.payload.id);
      const inCart = state.cart.find((item) =>
        item?.product.id === action.payload.id ? true : false
      );

      if (inCart) {
        let check = false;
        state.cart.map((item, key) => {
          if (
            item.product.id === action.payload.id &&
            item.setVar === action.payload.setVar
          ) {
            state.cart[key].quantity++;
            check = true;
          }
        });
        if (!check) {
          const newItem = {
            product: product,
            setVar: action.payload.setVar,
            quantity: 1,
          };
          state.cart.push(newItem);
        }
      } else {
        const newItem = {
          product: product,
          setVar: action.payload.setVar,
          quantity: 1,
        };
        state.cart.push(newItem);
      }
      return {
        ...state,
      };

  }
jiwami
  • 35
  • 8
  • What's `setVar` for in your code? – Marko Knöbl Jul 16 '22 at 05:56
  • It's an object with 2 keys setVar:{color:" ", size:" "} – jiwami Jul 16 '22 at 06:00
  • and why are you doing 2 checks...its either in cart or its not...and when you use map function it does not updates you array...it return a new copy. You might have to do state.cart=state.cart.map .... – Kaneki21 Jul 16 '22 at 06:01
  • It could be in a cart with same ID but with different variants (color or size ) so it should create new object and even if i sign state.cart doesn't help – jiwami Jul 16 '22 at 06:35
  • Ah ok so setVar is an object? In JS you can't compare objects via === – Marko Knöbl Jul 16 '22 at 06:41
  • Good point i forgot json.stringify() tnx – jiwami Jul 16 '22 at 06:51
  • 1
    You have a lot of state mutations in there, and in legacy Redux reducers like you are writing them here, that is never allowed. To be honest though, the focus is "legacy". This is a style of Redux that we are not recommending any more since 2019 - the official recommendation is to [nowadays use the official Redux Toolkit for any Redux code you write](https://redux.js.org/introduction/why-rtk-is-redux-today) - in `createSlice` reducers you could just mutate state and it would be totally okay, not a bug. I'd highly recommend to switch over, it will make your code a lot more readable and shorter. – phry Jul 16 '22 at 07:59

1 Answers1

1
item.product.id === action.payload.id && JSON.stringify(item.setVar) === JSON.stringify(action.payload.setVar)
jiwami
  • 35
  • 8
  • Not a good way to compare two objects but you probably found the issue. I suggest you explain with words what the issue is and try to come up with a better way to compare those two objects before the downvotes come , or simply mention it. See https://stackoverflow.com/questions/1068834/object-comparison-in-javascript. – Danziger Jul 17 '22 at 22:03
  • Is there a good way better than this one ? – jiwami Jul 18 '22 at 04:39
  • Take a look at the link in my previous comment. You can implement a deep compare function or, in this specific case where we know `item.setVar` only has 2 props, manually compare those two. – Danziger Jul 18 '22 at 09:19