Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 141921

Redux shows incorrect negative value for cost of items

$
0
0

I have a problem where my Redux store shows large negative value for, a parameter that is the total cost of products. This total cost was showing correct values until I used this value in different component (checkout - ordered items). Firstly it was only in the cart component where it showed total cost of items in cart.

Below I show the part of my code in cart, and in checkout component (the exact code is in both components):

...

const mapStateToProps = state => {
  return {
    items: state.cartReducer.addedItems,
    total: state.cartReducer.total
  };
};

...

Here I show screenshots of how it looks like:

Cart component

Checkout page

I tried reinstalling redux chrome devtools. And also commenting out the part about the total cost in one of the components. I also use redux-persist, may that be the issue? If there is need to show more code then I will add it, but the change happened suddenly only after adding code in other component described above.

Can you guide me where I should search where a problem is? Is there a way to reset redux somehow? I don't know if I mutated the state somewhere or is it maybe Redux fault.

EDIT 1:

I add cartReducer component:

import * as CartTypes from "../actions/cart.types";
import { items } from "../components/products/products";

const cartReducerDefaultState = {
  items,
  addedItems: [],
  total: 0
};

export const cartReducer = (state = cartReducerDefaultState, action) => {
  switch (action.type) {
    case CartTypes.ADD_TO_CART: {
      let addedItem = state.items.find(item => item.id === action.id);
      let existed_item = state.addedItems.find(item => action.id === item.id);
      if (existed_item) {
        addedItem.quantity += 1;
        return {
          ...state,
          total: state.total + addedItem.cost
        };
      } else {
        addedItem.quantity = 1;
        let newTotal = state.total + addedItem.cost;
        return {
          ...state,
          addedItems: [...state.addedItems, addedItem],
          total: newTotal
        };
      }
    }
    case CartTypes.DELETE_FROM_CART: {
      let itemToRemove = state.addedItems.find(item => action.id === item.id);
      let new_items = state.addedItems.filter(item => action.id !== item.id);

      //calculating the total
      let newTotal = state.total - itemToRemove.cost * itemToRemove.quantity;
      console.log(itemToRemove);
      return {
        ...state,
        addedItems: new_items,
        total: newTotal
      };
    }
    case CartTypes.ADD_QUANTITY: {
      let addedItem = state.items.find(item => item.id === action.id);
      addedItem.quantity += 1;
      let newTotal = state.total + addedItem.cost;
      return {
        ...state,
        total: newTotal
      };
    }
    case CartTypes.SUB_QUANTITY: {
      let addedItem = state.items.find(item => item.id === action.id);
      //if the qt == 0 then it should be removed
      if (addedItem.quantity === 1) {
        let new_items = state.addedItems.filter(item => item.id !== action.id);
        let newTotal = state.total - addedItem.cost;
        return {
          ...state,
          addedItems: new_items,
          total: newTotal
        };
      } else {
        addedItem.quantity -= 1;
        let newTotal = state.total - addedItem.cost;
        return {
          ...state,
          total: newTotal
        };
      }
    }
    case CartTypes.ADD_SHIPPING: {
      return {
        ...state,
        total: state.total + 6
      };
    }
    case CartTypes.SUB_SHIPPING: {
      return {
        ...state,
        total: state.total - 6
      };
    }
    default:
      return state;
  }
};

And action creator for cart:

import * as CartTypes from "./cart.types";

export const addToCart = id => {
  return {
    type: CartTypes.ADD_TO_CART,
    id
  };
};

export const deleteFromCart = id => {
  return {
    type: CartTypes.DELETE_FROM_CART,
    id
  };
};

export const addQuantity = id => {
  return {
    type: CartTypes.ADD_QUANTITY,
    id
  };
};

export const subQuantity = id => {
  return {
    type: CartTypes.SUB_QUANTITY,
    id
  };
};

But as I mentioned above, I didn't change anything in this reducer, and actions and it shows incorrect value.


Viewing all articles
Browse latest Browse all 141921

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>