Javascript reducer中的扩展语法与仅返回来自操作的数组有什么不同？

我不能理解这一部分，我知道如果我有这样一个数组：

const x = [1, 2, 3, 4]

const y = [...x];

应该是这样的：

const x = [1, 2, 3, 4]

const y = [...x];

这在redux中如何不同：

我有一个类似这样的操作，它获取一个产品和cartProducts（前一个状态），并检查cartProducts数组中是否存在该产品（通过比较ID），如果该产品不存在，则将其推送到购物车，如果存在，则增加找到的产品的数量：

这是我的行动

export const addToCart = (product, cartProducts) => {
    if (!product.quantity) {
        product.quantity = 1;
    }
    const index = cartProducts.findIndex(p => p.id === product.id);
    if (index < 0) {
        cartProducts.push(product);
    }
    else {
        cartProducts[index] = {
            ...cartProducts[index],
            quantity: cartProducts[index].quantity + 1
        }
    }
    return {
        type: ADD_TO_CART,
        payload: cartProducts
    }
}

不起作用的减速器（cartProducts无法正常渲染，不知道原因？？）：

---

spread syntax如何改变这里的一切，在这两种情况下都应返回具有相同产品的相同阵列？？？

因为spread syntax正在创建一个新阵列，以便订阅者知道它已改变。返回修改后的原始数组，订阅者不会知道它已更改

数组（和对象）通过它们的引用传递，因此，如果返回对同一数组的引用，不管插入或删除了什么，javascript都会认为它是同一个数组。这不适用于reducer，因为根据设计，应用商店的订阅者只会对更改做出反应，因此他们只会在数组实际更改时做出反应，唯一的方法是返回不同的（新的）数组

---

这就是为什么通常建议避免在这种存储框架（或一般情况下）中改变数组或对象，并将对象和数组视为不可变的。

因为扩展语法正在创建一个新数组，以便订阅者知道它已更改。返回修改后的原始阵列，订阅者不会知道它发生了更改。请您添加答案并进行详细解释，好吗？我一直知道，一旦状态发生更改，将进行重新渲染，但这是第一次了解更改的真实性质，谢谢！！