向我的 redux 商店添加“从购物车中删除”操作

Question

我一直在尝试将“从购物车中删除”操作添加到我的 redux 设置中。到目前为止，我可以将商品添加到我在store 中设置的白名单中，但我不确定如何从购物车中删除商品。这是我的store：

import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import  reducer  from './reducers';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';


const store = createStore(
  reducer,
  undefined,
  compose(
    applyMiddleware(createLogger(), thunkMiddleware),
    autoRehydrate()
  )
);

persistStore(store, {whitelist: ['cart']});

export default store; 

这些是我的reducers：

import {ADD_CART} from './actions';
import { REHYDRATE } from 'redux-persist/constants';

export default Reducer;

var initialState = {
  cart:{},
  data: [],
  url: "/api/comments",
  pollInterval: 2000
};

function Reducer(state = initialState, action){
    switch(action.type){
        case REHYDRATE:
                if (action.payload && action.payload.cart) {
                    return { ...state, ...action.payload.cart };
                }
            return state;

            case ADD_CART:
                return {
                    ...state,
                    cart: [...state.cart, action.payload]
                }



            default:
                return state; 
    };
}

这些是我的actions:

export const ADD_CART = 'ADD_CART';

export function addCart(item){
    return {
        type: ADD_CART,
        payload: item
    }
};

export function removeCart(item){
    return{
        type: REMOVE_CART,
        payload: item
    }
};

在我的Cart 组件中，我希望有一个从购物车中删除的按钮，您可以在其中选择要删除的特定项目：

import React, { Component } from 'react';
import {addCart} from './Shop'; 
import { connect } from 'react-redux';

export class Cart extends Component {
    constructor(props) {
        super(props);
        this.state = {items: this.props.cart,cart: [],total: 0};
    }

    ...
    render() {
        return(
            <div className= "Webcart" id="Webcart">
                {this.countTotal()}
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onCartAdd: (cart) => {
            dispatch(addCart(cart));
        },
    }
}

function mapStateToProps(state) {
  return { cart: state.cart };
}

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

我希望能够从 cart 数组中选择一个特定项目并将其删除。我相信这应该通过带有 redux 的action 来完成，因为我的数组保存在我的store 中。我该怎么做？

Answer 1

您是对的，只需从您的组件中调度 removeCart 操作（您已经定义）：

const mapDispatchToProps = (dispatch) => {
    return {
        onCartRemove: (cart) => {
            dispatch(removeCart(cart));
        },
        onCartAdd: (cart) => {
            dispatch(addCart(cart));
        },
    }
}

并通过在 reducer 中处理来更新状态

case REMOVE_CART:
    return {
        ...state,
        cart: state.cart.filter((item) => payload !== item)
    }