从Redux中仅删除数组中的一个元素,可以通过以下步骤实现:
下面是一个示例代码:
// 定义action类型
const REMOVE_ITEM = "REMOVE_ITEM";
// 创建action创建函数
const removeItem = (index) => {
return {
type: REMOVE_ITEM,
payload: index
};
};
// Redux的reducer
const reducer = (state = [], action) => {
switch (action.type) {
case REMOVE_ITEM:
return state.slice(0, action.payload).concat(state.slice(action.payload + 1));
default:
return state;
}
};
// 组件
class MyComponent extends React.Component {
handleRemoveItem = (index) => {
this.props.removeItem(index);
};
render() {
return (
<div>
{this.props.items.map((item, index) => (
<div key={index}>
{item}
<button onClick={() => this.handleRemoveItem(index)}>删除</button>
</div>
))}
</div>
);
}
}
// 将state和action绑定到组件的props上
const mapStateToProps = (state) => {
return {
items: state
};
};
const mapDispatchToProps = {
removeItem
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
在上述示例中,Redux的store中存储的是一个数组,组件通过props.items获取该数组,并通过map函数渲染数组中的每个元素。当点击删除按钮时,调用handleRemoveItem函数,并传入要删除的元素的索引,然后调用props.removeItem函数派发一个删除元素的action。
这样,当Redux的reducer接收到该action时,会根据索引删除数组中的对应元素,并返回一个新的数组。最后,组件会重新渲染,显示更新后的数组。
领取专属 10元无门槛券
手把手带您无忧上云