将“从购物车中删除”动作添加到我的REDEX商店

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

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数组中选择一个特定项并删除它。我相信这应该通过一个action与REDX完成，因为我的阵列正在保存在我的store。我怎样才能做到这一点？

来源

2017-08-06 feners

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

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

和更新由手柄时的状态在减速

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

来源

2017-08-06 20:04:53 Dario

我想你正在以错误的方式调用该动作。在你的'Cart'组件里，你可以简单地用'this.props.onCartRemove（item）'调用'onCartRemove'动作。 – Dario

对不起，我注意到了我的错误。 – feners

将“从购物车中删除”动作添加到我的REDEX商店

回答

相关问题