如何使用 React Redux 在 Reducer ADD_TO_CART 中添加产品项目的数量

Question

CartReducer.js



export default function cartReducer(state = {cart: [],qty:1 }, action) {
  switch (action.type) {
     case ADD_TO_CART:
         if (state.cart.indexOf(action.product) !== -1) {
              return state   // i want add quantity with increment (qty++)
          }
          return { cart:[...state.cart, action.product] } // send qty with cart
      case REMOVE_FROM_CART:
          return {
               cart: state.cart.filter(id => id !== action.product_id)
             }
       default:
     }
  retrun state;
}

我想通过产品项目传递数量，如果多次单击同一项目 (AddToCart) 然后增加数量 (qty++)

请帮帮我...

Answer 1

首先，一个操作应该始终有一个type 和一个payload，其中有效负载是一个包含您的数据的对象，在本例中是产品。

其次，数量应该是您cart 数组中每个产品的一部分，这样您就可以跟踪每个产品。

然后，我会做以下事情：

const { type, payload } = action // extract the type and payload before the switch statement

case ADD_TO_CART: {
  const productId = payload.product.id

  if (state.cart.findIndex(product => product.id === productId) !== -1) {
    const cart = state.cart.reduce((cartAcc, product) => {
      if (product.id === productId) {
        cartAcc.push({ ...product, qty: product.qty++ }) // Increment qty
      } else {
        cartAcc.push(product)
      }

      return cartAcc
    }, [])

    return { ...state, cart }
  }

  return { ...state, cart: [...state.cart, { ...payload.product, qty: 0 }] }
}