如何使用redux工具包从处于redux状态的数组中删除单个元素

// 创建Action
const removeItem = (itemId) => {
  return {
    type: 'REMOVE_ITEM',
    payload: itemId
  }
}

// 创建Reducer
const initialState = {
  items: [] // 初始状态为空数组
}

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.payload) // 根据元素的唯一标识符或索引过滤数组
      }
    default:
      return state
  }
}

// 创建Root Reducer
const rootReducer = combineReducers({
  reducer
})

// 创建Redux store
const store = createStore(rootReducer)

// 组件中使用Redux的connect函数
import { connect } from 'react-redux'

class YourComponent extends React.Component {
  // ...
  
  handleRemoveItem = (itemId) => {
    this.props.removeItem(itemId) // 触发REMOVE_ITEM Action
  }
  
  render() {
    // ...
  }
}

const mapStateToProps = state => {
  return {
    items: state.reducer.items // 从Redux store中映射状态到组件的props
  }
}

const mapDispatchToProps = dispatch => {
  return {
    removeItem: (itemId) => dispatch(removeItem(itemId)) // 将Action分派到Reducer的方法映射到组件的props
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent)