Redux Remove one item from cart - redux

Question

I've build an app in react-native and i'm using react-redux to store data in my cart.
Currently when I add a product lets say apple to my cart. My cart will contain 1x apple and if I add the same product to my cart I will have 2x apple.
Problem
But if I try to remove 1x apple my cart removes all the apples in my cart.
Question
How can I remove the item in my cart by -1?
cartitems.js
case 'REMOVE_FROM_CART':
return state.filter(cartItem=>cartItem.id !==
action.payload.id )
CartProducts.js component
<View key={products.index} style={styles.appels}>
<View style={styles.iconContainer}>
<Icon name={products.item.icon} color="#DD016B" size={25} />
</View>
<View style={styles.text}>
<Text style={styles.name}>
{products.item.name}
</Text>
<Text style={styles.price}>
€ {products.item.price}
</Text>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={() => this.props.onPress(products.item)} >
<Icon style={styles.button} name="ios-remove" color="white" size={25} />
</TouchableOpacity>
</View>
</View>
CartScreen.js
<Products products={appels} onPress={this.props.addItemToCart}/>
CartScreen.js | handeling removing product from cart
const mapDispatchToProps = (dispatch) =>{
return{
removeItem:(product) => dispatch ({
type:'REMOVE_FROM_CART' , payload: product
})
}
}

Answer 1

I believe you are keeping duplicates of the same product in the state when multiple copies of the same product are added. You should therefore only filter the first match instead of all matches:
case 'REMOVE_FROM_CART': {
const index = state.findIndex(item => item.id === action.payload.id);
return state.filter((_, i) => i !== index);
}
This should get it to work while keeping your current design.
However, if the user removes a duplicated product from the bottom of the list, the UI might not be intuitive as the first copy of the product in the list will be removed from the UI instead, hence you might want to adjust your removeItem action payload to contain the index of the product to be removed instead of the product object.
A better approach might be to use a qty variable to indicate multiple copies, which will reduce the state size and make it easier to display a quantity column on the cart screen (instead of displaying duplicated products):
case 'ADD_ITEM_TO_CART':
if (state.some(item => item.id === action.payload.id)) {
// increase qty if item already exists in cart
return state.map(item => (item.id === action.payload.id ? { ...item, qty: item.qty + 1 } : item));
}
return [...state, { ...action.payload, qty: 1 }]; // else add the new item to cart
case 'REMOVE_FROM_CART':
return state
.map(item => (item.id === action.payload.id ? { ...item, qty: item.qty - 1 } : item))
.filter(item => item.qty > 0);
Your CartScreen.js will also need to be modified accordingly if you use this new design.

Answer 2

When doing
return state.filter(cartItem=>cartItem.id !== action.payload.id )
You are basically saying, return everything but this cartItem specificaly.
That is not what you want. You want to give :
A quantity to remove in the payload.
The id of the product.
So here is your action :
dispatch({type:'REMOVE_FROM_CART' , payload: {product, qty} })
Then you have to find your item and update it's quantity :
case 'REMOVE_FROM_CART':
const updatedProductList = state.productList.map( (product) => {
if(product.id === payload.product.id){ // this is the item we care about
return {
...product, // this will avoid a state mutation
qty : product.qty - payload.qty // update the qty
}
}else { // just return the element as it is
return cartItem
}
})
return updatedCartItemList;
break;
default :
return state

Answer 3

case UNFAVORITE: {
return {
favorite: [
...state.favorite.filter(favorite => favorite !== action.payload),
],
};
}
simply do this to UNFAVORITE

Answer 4

Well, you may need to pass either quantity or increment/decrement flag in your action payload.
your action creator may accept parameter for increment/decrement
const updateItem = dispatch=>(increment=true)=>{
dispatch({type:'UPDATE_IN_CART' , payload: product, increment})
}
Now in your reducer
case 'UPDATE_IN_CART':{
const {increment, payload}= action; //ES6 destructing
const updatedCart = state.map((cartItem)=>{
if(cartItem.id !== payload.id )){
cartItem.quantity = increment?cartItem.quantity+1:cartItem.quantity-1 //will handle increment/decrement;
}
return cartItem;
})
return updatedCart;
}