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:
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.