javascript - 在 React/Redux 中，如何计算购物车的总价

Question

我已经在 Google 和 SO 上搜索了解决方案，但仍然找不到答案。他们都停留在“将商品添加到购物车”或“增加/减少数量”，但从不计算总计，这很烦人!

在我的应用程序中，有一个项目列表，用户可以在其中输入项目数量，这会更新其价格。我只想知道如何使用 Redux 将购物车中所有商品的所有价格汇总为Total 价格并将其显示在我的 React 应用程序中？

此外，如果您能给我指点任何实际上超越了在购物车中列出产品的购物车教程，我将很高兴。

Action :

/**
 * @description UPDATE SINGLE ITEM PRICE WHEN USER ENTER QUANTITY
 *
 * @param{number} price
 * @param{number} quantity - enter by user from input
 */
export const updateItemPrice = (price, quantity) => dispatch => {
  const result = price * quantity;

  return dispatch({
    type: UPDATE_ITEM_PRICE,
    subtotal: result
  });
};

reducer :

const INITIAL_STATE = {
  total: 0,
  subtotal: 0
};

const productsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    // Update single item price
    case Types.UPDATE_ITEM_PRICE:
      return {
        ...state,
        subtotal: action.subtotal,
        total: // --> Here is where I'm stuck!!
      };

    default:
      return state;
  }
};

Answer 1

编辑:更完整的状态/ Action /缩减器示例。

你真的需要在 redux 中存储总数吗？通常，您希望在 redux 中保持最小状态，并在选择器中计算您可以计算的任何派生数据。小计和总计肯定属于这一类(除非你有一个非常不寻常的设置你自己的价格设置或其他东西)，所以而不是将它们存储在商店中，你可以根据需要计算它们，例如作为你的一部分 mapStateToProps 函数(假设您使用的是 react-redux)。

这是您所在州的示例。它包括两个主要部分，一个用于项目目录，另一个专门用于卡片。

{
  itemDetails: {
    item01: { name: 'Item One', price: 9.95 },
    item02: { name: 'Item Two', price: 10 },
    item03: { name: 'Item not appearing in this example', price: 50 },
  },
  cart: {
    item01: 1,
    item02: 2,
  },
}

看看购物车切片，reducer 需要做的就是管理购物车中的数量，您可以通过基本操作来完成。 actions 和 reducer 可能看起来像(这些都没有经过测试，只是为了提供一种感觉):

// Cart actions
const incrementQuantityInCart = (itemId) => ({
  type: 'incrementQuantityInCart',
  itemId,
})

const decrementQuantityInCart = (itemId) => ({
  type: 'decrementQuantityInCart',
  itemId,
})

const removeItemFromCart = (itemId) => ({
  type: 'removeItemFromCart',
  itemId,
})

// Cart reducer, would be combined with a separate reducer using redux's `combineReducers`
const cart = (state = {}, action) => {
  switch (action.type) {
    case 'incrementQuantityInCart':
      const currentQuantity = state[action.itemId] || 0
      return {
        ...state,
        [action.itemId]: currentQuantity + 1,
      }
    case 'decrementQuantityInCart':
      const currentQuantity = state[action.itemId] || 0
      return {
        ...state,
        [action.itemId]: Math.max(currentQuantity - 1, 0),
      }
    case 'removeItemFromCart':
      return {
        ...state,
        [action.itemId]: 0,
      }
    default:return state
  }
}

然后您可以有一个选择器，例如:

function getCartContents(state) {
  const itemsInCart = Object.keys(state.cart)
    .filter(itemId => state.cart[itemId] > 0)
    .map(itemId => {
      const quantity = state.cart[itemId]
      const itemDetail = state.itemDetails[itemId]

      return {
        name: itemDetail.name,
        price: itemDetail.price,
        quantity,
        subtotal: itemDetail.price * quantity,
      }
    })

  const total = itemsInCart.reduce((total, item) => total + item.subtotal)

  return { itemsInCart, total }
}

// example output based on the above state
// {
//   itemsInCart: [
//     {
//       name: 'Item One',
//       price: 9.95,
//       quantity: 1,
//       subtotal: 9.95,
//     },
//     {
//       name: 'Item Two',
//       price: 10,
//       quantity: 2,
//       subtotal: 20,
//     },
//   ],
//   total: 29.95,
// }

然后您可以在 mapStateToProps 中或作为您的 mapStateToProps 为您想要的任何组件使用此函数，并且它将可以访问其 Prop 中的此数据，因此您可以根据需要使用。