使用Reducer删除错误项目时从数组中删除产品

const initialState = {
  products: [
    { id: 1, name: 'Product 1' },
    { id: 2, name: 'Product 2' },
    { id: 3, name: 'Product 3' },
    // 其他产品...
  ]
};

const deleteProduct = (productId) => {
  return {
    type: 'DELETE_PRODUCT',
    payload: productId
  };
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'DELETE_PRODUCT':
      return {
        ...state,
        products: state.products.filter(product => product.id !== action.payload)
      };
    default:
      return state;
  }
};

import { connect } from 'react-redux';
import { deleteProduct } from 'actions';

const ProductList = ({ products, deleteProduct }) => {
  const handleDelete = (productId) => {
    deleteProduct(productId);
  };

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <span>{product.name}</span>
          <button onClick={() => handleDelete(product.id)}>删除</button>
        </div>
      ))}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    products: state.products
  };
};

const mapDispatchToProps = {
  deleteProduct
};

export default connect(mapStateToProps, mapDispatchToProps)(ProductList);