У меня проблемы с пониманием реализации removeFromCart в примере корзины покупок Redux

Question

Я не уверен, где и как реализовать функцию removeProduct и как ее определить. Основная идея заключается в реализации функции removeProductFromCart в примере корзины покупок Redux. https://github.com/reduxjs/redux/tree/master/examples/shopping-cart

что я пробовал до сих пор:

action.js

           const deleteFromCart = productId => ({
                 type: types.REMOVE_PRODUCT,
                 productId
            })

           export const removeProduct = productId => (dispatch)=> {
                  dispatch(deleteFromCart(productId))
            }

cartReducer.js

           const addedIds = (state = initState.addedIds, action) => {
                   switch (action.type) {
                       case ADD_PRODUCT:

                       if(state.indexOf(action.productId) !== - 1){
                             return state
                       }
                       return [ ...state, action.productId ]

                       case REMOVE_PRODUCT:

                           return state.filter(productId => action.productId !== productId)

                       default:
                           return state
                    }
              }

          const quantityById = (state = initState.quantityById, action ) => {
                  switch (action.type) {
                       case ADD_PRODUCT:
                  const { productId } = action
                  return {
                        ...state,
                        [productId]:(state[productId] || 0) + 1
                  }
                       case REMOVE_PRODUCT:
                  return { 
                        ...state,
                        [productId]: state[productId] - 1
                  } 
                     default:
                         return state
                  }
             }

Cart.js

     const Cart = ({products, total, onCheckoutClicked, 
     onDeleteFromCart }) => {

     const hasProducts = products.length > 0

     const nodes = hasProducts ? (

     products.map(product =>

         <div key={product.id}>

            <Product
             titulo={product.titulo}
             price={product.price}
             quantity={product.quantity}
             />
            <button
             onClick={onDeleteFromCart}
             disabled={product.inventory < 0 ? 'disabled' :'' }>
            {product.inventory < 0 ? 'Sin productos' : 'Sacar del carrito'}
             </button>

          </div>
         )
       ):(<p>Agregá productos al carrito</p>)

       return (
            <div>
                <h3>Tu Carrito</h3>
                <div>{nodes}</div>
                <p>Total: &#36;{total}</p>
                <button onClick={onCheckoutClicked} disabled={hasProducts ? '' : 'disabled'}>Checkout</button>
             </div>
                )      
               }

          Cart.propTypes = {
           products:PropTypes.array,
           total:PropTypes.string,
           onCheckoutClicked:PropTypes.func,
           onDeleteFromCart:PropTypes.func
      }

    export default  Cart

CartContainer.js

const CartContainer = ({products, total, checkout, removeProduct}) => (

  <Cart
     products={products}
     total={total}
     onCheckoutClicked={()=>checkout(products)}
     onDeleteFromCart={()=>removeProduct(products.map(product => product.id))}
  />
)

CartContainer.propTypes = {
  products: PropTypes.arrayOf(PropTypes.shape({
    id:PropTypes.number.isRequired,
    titulo: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    quantity: PropTypes.number.isRequired
  })).isRequired,
  total:PropTypes.string,
  checkout:PropTypes.func.isRequired,
  removeProduct:PropTypes.func.isRequired
}

const mapStateToProps = (state) => ({
  products: getCartProducts(state),
  total: getTotal(state)
})

export default connect(
  mapStateToProps,
  { checkout, removeProduct }
)(CartContainer)

этот код возвращает массив, когда я отправляю действие REMOVE_PRODUCT ... так что я не заканчиваю понимать, как я могу заставить это работать .. код не выдает ошибку, но как я могу перезапустить только идентификатор продукта? а не массив .. это правильно реализовать функциональность в CartContainer и корзине? ... имеет смысл для моего ... но я видел некоторый код, где реализация находится в productitems.js

Заранее спасибо

Answer 1

Есть пара вещей, которые вы, вероятно, захотите исправить.

Во-первых, ваш action.js немного избыточен.Вы просто должны иметь возможность:

export const removeProduct = productId => ({
             type: types.REMOVE_PRODUCT,
             productId
        })

Далее, в вашем редукторе вы захотите убедиться, что вы распространили свое состояние и затем отфильтровали через указанный массив.Я предполагаю, что ваше начальное состояние для редуктора выглядит примерно так:

const INITIAL_STATE = {
  products: [] <--- An array of products in the cart
}

Если это правильно, то case в вашем редукторе должно выглядеть примерно так:

case REMOVE_FROM_OBJECT_ARRAY:
        return {
            ...state,
            products: state.products.filter(product => product.id !== action.productId),
        };

Послечто, когда вам нужно передать действие removeProduct компоненту <Cart/>, оно должно быть:

onDeleteFromCart={this.props.removeProduct}

Поскольку вы назначаете это действие реквизиту.

Наконец, выВам нужно будет передать идентификатор продукта в метод onClick вашей кнопки, где вы запускаете действие:

onClick={onDeleteFromCart(product.id)}

Надеюсь, это направит вас в правильном направлении.

Редактировать

Попробуйте преобразовать в класс:

class CartContainer extends React.Component {
    constructor(props) {
      super(props);
    }
   // You may not need the constructor
}

handleRemoveProduct = (e, id) => {
  e.preventDefault()
  this.props.removeProduct(id)
}

render() {
  return(
    <Cart
      products={products}
      total={total}
      onCheckoutClicked={()=>checkout(products)}
      onDeleteFromCart={()=>removeProduct(products.map(product => 
      product.id))}
    />
  )
}

CartContainer.propTypes = {
  products: PropTypes.arrayOf(PropTypes.shape({
    id:PropTypes.number.isRequired,
    titulo: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    quantity: PropTypes.number.isRequired
  })).isRequired,
  total:PropTypes.string,
  checkout:PropTypes.func.isRequired,
  removeProduct:PropTypes.func.isRequired
}

const mapStateToProps = (state) => ({
  products: getCartProducts(state),
  total: getTotal(state)
})

export default connect(
  mapStateToProps,
  { checkout, removeProduct }
  )(CartContainer)

Затем передайте эту функцию в ваш <Cart/> компонент с помощью:

onDeleteFromCart={this.handleRemoveProduct}

Тогда в вашей кнопке:

onClick={(e) => onDeleteFromCart(e, id)}

Надеюсь, что это работает для вас.

Answer 2

Я пока не могу комментировать, и извините за это.Я удалю это позже.Я не понимаю, что именно вы хотите сделать.Вы хотите удалить Id из массива или вернуть id?