React Redux中如何计算购物车所有加购商品的总价格

你已经完成了购物车单商品渲染、小计计算、数量增减功能，总价计算本质是对所有商品的单商品小计做累加，有两种成熟实现方案，可根据项目场景选择。

方案1：组件内直接计算（最简单，适配绝大多数中小项目场景） #

直接用数组的reduce方法遍历购物车商品数组做累加，不需要额外引入依赖，在现有代码基础上改动极小。

• 在组件中通过useSelector拿到购物车数组item之后，新增一行计算逻辑：

// 累加所有商品的「单价*购买数量」，初始值传0避免空数组报错
const totalPrice = item.reduce((sum, cartItem) => sum + cartItem.price * cartItem.qty, 0)

// 金额展示建议保留2位小数，同时规避常规浮点数精度问题
const displayTotal = totalPrice.toFixed(2)

• 把计算结果填充到现有结算区块的对应位置即可：

<div className='checkout'>
  <h2 className='my-4'>total price: ${displayTotal}</h2>
  <button className='btn btn-outline-dark px-5 py-2 green'>Checkout</button>
</div>

注意事项 #

• reduce的初始值0必须传，否则购物车为空时会直接抛出类型错误
• 如果项目对金额精度要求高，不要直接用浮点数计算，可以把所有金额转成最小货币单位（比如人民币分、美元美分）做整数运算，最后再转回常规单位展示，避免出现0.1+0.2=0.30000000000000004这类异常计算结果

方案2：Redux 层缓存计算（适配商品量大、性能要求高的场景） #

如果购物车商品量级较大，不想每次组件重渲染都重新遍历计算总价，可以把总价计算逻辑移到Redux selector层，用@reduxjs/toolkit自带的createSelector做记忆化缓存，只有购物车商品数据真的发生变化时才会重新计算总价，减少无效计算。

1. 首先在购物车对应的slice文件里定义带缓存的selector：

import { createSelector } from '@reduxjs/toolkit'

// 基础selector：读取Redux中存储的购物车商品数组
const selectCartItems = (state) => state.cart.item

// 记忆化selector：仅在购物车数组变化时重新计算总价
export const selectCartTotal = createSelector(
  [selectCartItems],
  (items) => items.reduce((sum, cartItem) => sum + cartItem.price * cartItem.qty, 0)
)

2. 在购物车组件中直接通过useSelector读取总价即可：

const totalPrice = useSelector(selectCartTotal)
const displayTotal = totalPrice.toFixed(2)

现有代码可优化点 #

• 遍历商品列表的map方法没有给根节点加key属性，React会抛出列表渲染警告，建议给每一项商品的外层div加上商品唯一id作为key：

item.map((cart) => {
  return (
    <div className='row py-5 border-bottom' key={cart.id}>
      {/* 原有商品渲染内容保持不变 */}
    </div>
  )
})

• 空购物车提示存在拼写错误：continoue shopping 可修正为 continue shopping

内容的提问来源于stack exchange，提问作者Mirza Irtiza