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

Question

我正在学习 React/Redux MERN 教程，有人讨论过教程中的添加到购物车功能过于复杂或不正确。

了解 React 的正确设计和状态管理的人可以告诉我每种方法的 pros/cons 吗？

方法一：在产品页面点击“加入购物车”。产品 ID/QTY 被传递给您的 action creator，reducer 将根据 ID 和数量存储产品信息。转到域时。com/cart，cartScreen 将根据 cartReducer 状态填充购物车。

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

方法二：（此为教程方法）在商品画面点击“加入购物车”。 AddtoCartHandler 重定向到域。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 过于复杂和损坏。一位学生评论说“当您将商品添加到购物车时，您无法更改该商品的数量。原因是我们从查询参数中获取数量值 (qty)。因此，如果您尝试更改该值并刷新页面， useEffect 函数将使用 productId 和 qty 值将产品数量重置为最初添加到购物车的数量。

为什么要这样做？为什么不在用户单击“添加到购物车”按钮时发送 addToCart 并在 CartScreen 中显示购物车状态中的任何内容？使用查询字符串只会让它变得过于复杂并且容易出错。"

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

想法？

Answer 1

这两种方法都行得通。第一种方法比第二种方法更干净。我想，教程很可能是在用他们得到的 URL 做一些事情。不确定是什么，但您在 URL 中公开了产品 ID 和数量。 URL 可以用作 return URL 在转到第三方支付网站或向该网站提供价值后。

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

React/Redux Ecommerce State management design question?

reactjs

redux

react-state-management