Javascript 如何在redux reducer中删除购物车项目？

[！[enter image description here][1][1]我不熟悉ReactJS和Redux。在我的应用程序中，我有一个CartPage，它显示所有CartItems以及删除任何Cart项目的删除按钮

下面是我删除购物车项目的代码片段，但这段代码似乎不起作用

下面我想删除阵列中的CustomerPartItem如何删除帮助我

有人能帮我吗？我怎样才能做到这一点

//action
export const deleteCustomerCartSuccess = payload => ({
  payload,
  type: constants.CUSTOMER_CART_DELETE_SUCCESS,
})


   import * as constants from '../constants/CartPage';    
        const initialState = {
          customerCartDetails: {},
          id: ''
        };
        const reducer = (state = initialState, action) => {
          switch (action.type) {
            case constants.CUSTOMER_CART_DETAILS_SUCCESS: {
              return {
                ...state,
                customerCartDetails: action.payload.data,
              };
            }
            case constants.CUSTOMER_CART_DELETE_SUCCESS: {
              console.log('REMOVE_REDUCER', action.payload, state.customerCartDetails.filter(item => item.id !== action.payload.id));
              return {
                ...state,
                customerCartDetails: state.customerCartDetails.CustomerCartItem.filter(item => item.id !== action.payload.id)
              };
            }    
            default: {
              return state;
            }
          }
        };


//Component 

 removeCartItem(index) {
    const { deleteCustomerCartSuccess } = this.props;
    deleteCustomerCartSuccess(index)
}

有几件事：

    // Create a types.js to hold all your action constants
    import { CUSTOMER_CART_DETAILS_SUCCESS, CUSTOMER_CART_DELETE_SUCCESS } from './types'

    // Not necessary, but if you'll be logging a lot, consider destructuring
    const { log } = console;

    const initialState = {
      // This should be an array, not an object, if you'll be using the filter method
      customerCartItem: [],
      // When initializing, make sure to set to initial state to empty arrays, objects and null values
      id: null
    };

    const reducer = (state = initialState, action) => {
      // Destructure these two from the action object
      const { type, payload } = action;
      switch (type) {
        case CUSTOMER_CART_DETAILS_SUCCESS: {
          log('CUSTOMER_CART_DETAILS_SUCCESS', payload.data);
          return {
            ...state,
            customerCartItem: payload.data,
          };
        }
        case CUSTOMER_CART_DELETE_SUCCESS: {
          log('REMOVE_REDUCER', payload);
          return {
            ...state,
            // After your edit:
            customerCartItem: state.customerCartItem.filter(item => item.id !== payload.id)
          };
        }    
        default: {
          return state;
        }
      }
    };

有几件事：

    // Create a types.js to hold all your action constants
    import { CUSTOMER_CART_DETAILS_SUCCESS, CUSTOMER_CART_DELETE_SUCCESS } from './types'

    // Not necessary, but if you'll be logging a lot, consider destructuring
    const { log } = console;

    const initialState = {
      // This should be an array, not an object, if you'll be using the filter method
      customerCartItem: [],
      // When initializing, make sure to set to initial state to empty arrays, objects and null values
      id: null
    };

    const reducer = (state = initialState, action) => {
      // Destructure these two from the action object
      const { type, payload } = action;
      switch (type) {
        case CUSTOMER_CART_DETAILS_SUCCESS: {
          log('CUSTOMER_CART_DETAILS_SUCCESS', payload.data);
          return {
            ...state,
            customerCartItem: payload.data,
          };
        }
        case CUSTOMER_CART_DELETE_SUCCESS: {
          log('REMOVE_REDUCER', payload);
          return {
            ...state,
            // After your edit:
            customerCartItem: state.customerCartItem.filter(item => item.id !== payload.id)
          };
        }    
        default: {
          return state;
        }
      }
    };

---

如果要从购物车中删除所有项目

异径管

const initialState = {
  items: {},
  totalAmount: 0,
};

在开关箱中

 case CLEAR_CART:
    return  state={ items: {}, totalAmount: 0, }

这是行动的结果

export const clearCart = () => {
  return {
      type: CLEAR_CART
  }
}

---

如果要从购物车中删除所有项目

异径管

const initialState = {
  items: {},
  totalAmount: 0,
};

在开关箱中

 case CLEAR_CART:
    return  state={ items: {}, totalAmount: 0, }

这是行动的结果

export const clearCart = () => {
  return {
      type: CLEAR_CART
  }
}

---

我得到的错误类似于state.customerCartItem.filter不是函数。请再次阅读问题。因为

customerCartDetails

是一个对象，而不是数组。该方法适用于array，然后我必须以何种方式删除购物车项目。将

customerCartDetails

更改为数组。每次向购物车添加商品时，将一个对象推送到

customerCartDetails

，看起来像，

{name:'item-1'，price:100}

我已更改了数组格式，但仍然收到错误customerCartItem.filter不是函数。我收到的错误类似于state.customerCartItem.filter不是函数。请再次阅读问题。因为

customerCartDetails

是一个对象，而不是数组。该方法适用于array，然后我必须以何种方式删除购物车项目。将

customerCartDetails

更改为数组。每次向购物车添加商品时，将一个对象推送到

customerCartDetails

，看起来像，

{name:'item-1'，price:100}

我已更改了数组格式，但仍然收到错误customerCartItem.filter不是函数。