React/Redux 电子商务状态管理设计问题？

Question

我正在关注 React/Redux MERN 教程，并且讨论过教程中的添加到购物车功能过于复杂或不正确。

了解 React 正确设计和状态管理的人能否告诉我每种方法的优缺点？

方法一：在产品界面点击“加入购物车”。产品 ID/数量将传递给您的操作创建者，reducer 将根据 ID 和数量存储产品信息。 访问 domain.com/cart 时，cartScreen 将根据 cartReducer 状态填充购物车。

const addToCartHandler = () => {
        dispatch(addToCart(product._id, qty))
        props.history.push('/cart')
    }

方法2：（这是教程方法）在产品屏幕上点击“加入购物车”。 AddtoCartHandler 重定向到 domain.com/cart/ID?qty=1 cartScreen 组件具有 useEffect 它将调度购物车操作创建者并从 URL 参数中提取 ID/Qty。

    const productId = match.params.id
    const qty = location.search ? Number( location.search.split('=')[1]) : 1
     
    useEffect(() => {
    if(productId){
     dispatch(addToCart(productId, qty))
    }
    }, [dispatch, productId, qty])

学生的抱怨是方法2过于复杂和破碎。 一位学生评论“当您将商品添加到购物车时，您无法更改该商品的数量。原因是我们从查询参数中获取数量值（数量）。因此，如果您尝试更改值并刷新页面， useEffect 函数将使用 productId 和 qty 值将产品数量重置为最初添加到购物车的数量。

为什么要这样？为什么不直接在用户单击 Add To Cart 按钮时调度 addToCart 并在 CartScreen 中显示购物车状态中的任何内容？使用查询字符串只会使其过于复杂且容易出错。”

作为初学者，我不确定为什么方法 1 或 2 会比另一种更好，以及在哪种情况下更好。在我看讲座之前，我试着想着自己做，写了伪代码。我做到了方法 1。当讲师开始使用 URL 参数进行调度时，我认为如果您必须以某种方式跟踪 URL 和 URL 历史记录可能会更好？

想法？

Answer 1

这两种方法都可以。第一种方法比第二种方法更干净。我想，最有可能的是，本教程正在使用他们获得的 URL 做一些事情。不确定是什么，但您在 URL 中公开了产品 ID 和数量。在访问第三方支付站点或向该站点提供值后，URL 可用作返回 URL。