在React Redux中,要从购物车中删除项目,需要进行以下步骤:
下面是一个示例代码:
// 购物车的reducer
const cartReducer = (state = [], action) => {
switch (action.type) {
case 'REMOVE_ITEM':
return state.filter(item => item.id !== action.payload);
default:
return state;
}
};
// action creator
const removeItem = (itemId) => {
return {
type: 'REMOVE_ITEM',
payload: itemId
};
};
// 组件
import React from 'react';
import { connect } from 'react-redux';
import { removeItem } from './actions';
const Cart = ({ cartItems, removeItem }) => {
return (
<div>
<h2>购物车</h2>
<ul>
{cartItems.map(item => (
<li key={item.id}>
{item.name} <button onClick={() => removeItem(item.id)}>删除</button>
</li>
))}
</ul>
</div>
);
};
const mapStateToProps = state => {
return {
cartItems: state.cart
};
};
const mapDispatchToProps = {
removeItem
};
export default connect(mapStateToProps, mapDispatchToProps)(Cart);
在这个示例中,我们创建了一个名为REMOVE_ITEM
的action类型,用于表示删除项目的操作。在购物车的reducer中,我们使用filter方法来过滤掉与传入的项目ID相匹配的项目。在组件中,我们使用connect函数将购物车的状态和删除项目的action creator绑定到组件上,并在点击删除按钮时调用这个action creator来触发删除项目的操作。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云