私のレヴィクスストアに「カートからの削除」アクションを追加する

Question

私はレビュックスセットアップに「カートからの削除」アクションを追加しようとしていました。これまでのところ私は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：私はしたい私のCartコンポーネントで

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 
    } 
}; 

がある

から削除を持っていますカートボタンをクリックすると、削除するアイテムを選択できます。

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アレイから特定の項目を選択して削除したいと考えています。私はstoreに配列が保存されているので、これはactionからreduxを使って行うべきだと思います。これどうやってするの？

Answer 1

あなたは、正しいですちょうどあなたのコンポーネントから（すでに定義されている）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) 
    }