Redux中为何.filter不修改原状态而.push会违反规则？

核心原因在于这两个数组方法对原数组的影响完全不同，直接对应Redux reducer「不能修改原始状态」的规则：

• push()是「变异方法」，直接修改原数组
  push()的作用就是在原数组的末尾追加元素，它会直接改变调用它的那个数组本身。比如：

  const todos = [{id:1, text:'吃饭'}, {id:2, text:'睡觉'}];
  todos.push({id:3, text:'打豆豆'});
  // 原todos数组已经变成了包含三个元素的数组，原始状态被直接修改
  

  Redux的reducer要求不能触碰原始状态，必须返回新的状态值，所以用push()直接改原数组的操作完全违反规则。

• filter()是「非变异方法」，返回全新数组，原数组不变
  filter()会遍历原数组，根据你传入的判断条件，把符合条件的元素收集起来，创建一个全新的数组返回，调用它的原数组从头到尾不会有任何变化。比如：

  const todos = [{id:1, done:true}, {id:2, done:false}];
  const activeTodos = todos.filter(todo => !todo.done);
  // 原todos数组还是[{id:1, done:true}, {id:2, done:false}]
  // activeTodos是新生成的数组：[{id:2, done:false}]
  

  这种操作没有修改原始状态，返回的是新状态，完全符合Redux reducer的规则。

• 扩展运算符的作用和filter类似
  你提到的扩展运算符[...原数组, 新元素]，本质也是创建新数组：把原数组的所有元素复制到新数组里，再追加新元素，原数组不会被修改，属于非变异操作，所以也符合规则。

Redux要求状态不可变的底层逻辑是：它依赖状态的引用变化来检测更新——如果直接修改原数组（引用地址没变），Redux无法感知状态发生了变化，会导致组件不重新渲染；同时不可变状态也让调试、回溯状态变化（时间旅行）变得更简单。

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