如何防止Redux state发生意外变更？

核心原因 #

你使用的数组展开语法[...allProducts]属于浅拷贝，仅会生成新的数组实例，数组内部存储的所有产品对象依然和Redux store中allProducts对应的对象共享内存引用。
执行逻辑链路如下：

• 你将浅拷贝得到的prevProducts赋值给本地stateproducts时，本地state里的产品对象和Redux state里的对象指向同一份数据
• 后续执行newProducts[index].price = newPrice时，本质是直接修改了共享的原对象属性，所以Redux store里的allProducts会同步被修改

修复方案 #

两种可选方案，可根据业务场景选择：

方案1：仅对修改的对象做分层拷贝（性能最优） #

修改更新逻辑，修改对象属性前先对单个产品对象做浅拷贝，不触及原对象：

const updateProductPrice = (newPrice, index) => {
 const newProducts = [...products];
 // 生成新的产品对象，修改新对象属性
 newProducts[index] = {
  ...newProducts[index],
  price: newPrice
 };
 setProducts(newProducts);
 console.log(allProducts);
}

方案2：初始化本地state时做完整深拷贝（适合对象层级深的场景） #

如果产品对象嵌套层级较多，分层拷贝太繁琐，可以在初始化本地state时直接做完整深拷贝，切断和Redux state的引用关联：

// 用structuredClone做深拷贝，切断所有引用关联
const prevProducts = structuredClone(allProducts);
setProducts(prevProducts);

const updateProductPrice = (newPrice, index) => {
 const newProducts = [...products];
 newProducts[index].price = newPrice;
 setProducts(newProducts);
 console.log(allProducts);
}

注意：Redux官方要求所有state必须遵循不可变原则，禁止直接修改原state对象，违规操作会导致状态追踪失效、渲染异常等不可预期的问题。

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