使用Redux开发加购功能时报错state.products.push is not a function如何解决

• Array.push() 方法返回值是数组新增元素后的长度（数字类型），而非修改后的数组本身。第一次执行该reducer后，state.products 会被覆盖为数字，后续调用时对数字执行push操作就会抛出push is not a function的错误。
• Redux reducer要求遵循不可变数据原则，禁止直接修改原状态，push方法会直接修改原有state.products数组，本身不符合Redux开发规范。

替换reducer中的products赋值逻辑，使用不可变写法即可，推荐两种实现：

方法1：数组展开运算符（最常用） #

export const AddToCart = (state, { item }) => ({
  ...state,
  products: [...state.products, item],
});

方法2：数组concat方法 #

export const AddToCart = (state, { item }) => ({
  ...state,
  products: state.products.concat(item),
});

两种写法都不会修改原数组，会返回包含新元素的全新数组，完全符合Redux的不可变要求。

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