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

Question

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

谁能理解正确的设计和状态管理的React告诉我的优点/缺点的每个方法?

方法一:单击"添加到目录";在产品屏幕上。产品ID/数量被传递给您的操作创建者，减速器将根据ID和数量存储产品信息。当转到domain.com/cart时，cartScreen将根据cartReducer状态填充购物车。

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

方法二:(这是教程方法)点击"添加到目录";在产品屏幕上。AddtoCartHandler重定向到domain.com/cart/ID?qty=1cartScreen组件具有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值将产品数量重置为最初添加到购物车中的金额。

为什么要这样做?为什么不在用户单击Add ToCart按钮时调度addToCart，然后在CartScreen中显示购物车状态的内容呢?使用查询字符串只会使它过于复杂并且容易出错。">

作为一个初学者，我不确定为什么方法1或2会比另一个更好，在哪种情况下。在我看讲座之前，我试着自己动手写伪代码。方法1。当讲师开始使用URL参数进行分派时，我想如果你必须以某种方式跟踪URL和URL历史可能会更好?

想法吗?

Answer 1

两种方法都可以。第一种方法比第二种方法更简洁。最有可能的是，我认为教程正在处理他们获得的URL。不确定是什么，但你在URL中暴露了产品ID和数量。URL可以用作访问第三方支付网站或向该网站提供值后的返回URL。