redux 从购物车中删除一件商品

8qgya5xd  于 2022-11-24  发布在  其他
关注(0)|答案(4)|浏览(156)

我已经在react-native中构建了一个应用程序,我正在使用react-redux将数据存储在我的购物车中。
目前,当我添加一个产品,让我们说苹果到我的购物车。我的购物车将包含1 x苹果,如果我添加相同的产品到我的购物车,我将有2 x苹果。

问题

但是,如果我试图删除1 x苹果,我的购物车删除所有的苹果在我的购物车。

问题

如何在-1之前删除购物车中的商品?

cartitems.js

case 'REMOVE_FROM_CART':
            return state.filter(cartItem=>cartItem.id !== 
                action.payload.id )

CartProducts.js组件

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

购物车屏幕.js

<Products products={appels} onPress={this.props.addItemToCart}/>

购物车屏幕.js|处理从推车中取出产品

const mapDispatchToProps = (dispatch) =>{
    return{
        removeItem:(product) => dispatch ({
            type:'REMOVE_FROM_CART' , payload: product
        })  
    }
}
ogq8wdun

ogq8wdun1#

我认为您在添加同一产品的多个副本时,会在状态中保留同一产品的副本。因此,您应该只过滤第一个匹配项,而不是所有匹配项:

case 'REMOVE_FROM_CART': {
  const index = state.findIndex(item => item.id === action.payload.id);
  return state.filter((_, i) => i !== index);
}

这应该可以让它工作,同时保持您当前的设计。
但是,如果用户从列表底部删除重复的产品,UI可能不直观,因为列表中产品的第一个副本将从UI中删除,因此您可能需要调整removeItem操作有效负载,以包含要删除的产品的索引,而不是产品对象。
更好的方法可能是使用qty变量来指示多个副本,这将减少状态大小,并使在购物车屏幕上显示数量列(而不是显示重复的产品)变得更容易:

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);

如果您使用此新设计,您的CartScreen.js也需要相应地修改。

fcwjkofz

fcwjkofz2#

当做
返回状态。过滤器(cartItem=〉cartItem.id!== action.payload.id)
您基本上是在说,返回除此cartItem之外的所有内容。
那不是你想要的。你想要给予:

  • 要从有效负载中移除的数量。
  • 产品的ID。

下面是您的操作:

dispatch({type:'REMOVE_FROM_CART' , payload: {product, qty} })

然后,您必须找到您的项目并更新其数量:

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
ygya80vv

ygya80vv3#

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

只需对“不受欢迎”执行此操作

ldioqlga

ldioqlga4#

那么,您可能需要在操作负载中传递数量或递增/递减标志。
操作创建者可以接受递增/递减参数

const updateItem = dispatch=>(increment=true)=>{
  dispatch({type:'UPDATE_IN_CART' , payload: product, increment})
}

现在在你的减速器里

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;
}

相关问题