Redux使用@reduxjs/toolkit写reducer时for循环生效但filter失效问题

两类数组方法的本质差异 #

• splice是原地修改型数组方法：会直接改动调用它的原数组本身，不需要额外接收返回值就能看到数组内容变化。
• filter是纯函数型数组方法：完全不会改动调用它的原数组，只会根据过滤规则生成一个全新的数组，必须接收它的返回值、把这个新数组用到后续逻辑里，才能拿到过滤后的结果。

结合RTK createSlice 的reducer运行规则 #

RTK内部集成Immer，允许在reducer里编写“看似直接修改状态”的代码，Immer会自动把对draft草稿的所有修改转换为安全的不可变更新，最终生成新的状态树。它对reducer的执行逻辑有明确规则：

• 如果reducer里直接修改了draft草稿（比如用splice调整todos数组元素、修改对象属性），Immer会自动捕捉这些修改，不需要手动返回新状态，你写的实现(1)能正常生效就是因为这个逻辑。
• 如果reducer没有做任何draft修改，而是通过返回值提供新状态，就必须把生成的新状态显式return出去，Immer才会把这个返回值作为最终新状态替换旧状态。

实现(2)不生效的核心问题 #

你写的实现(2)里，只是执行了一次todos.filter(...)，既没有修改原todos draft数组，也没有把filter生成的新数组return出去，等于执行了一行没有任何实际副作用的代码，最终传递出去的状态还是原来的旧数组，自然达不到删除匹配元素的效果。

你偏好的filter写法的正确实现 #

直接把filter生成的新数组作为reducer的返回值即可，这个写法完全符合RTK规范，可读性也远高于反向遍历splice的写法：

todosRemoved: (todos, action) => {
  return todos.filter((todo) => todo.listId !== action.payload.id)
}

注意：不要尝试在reducer里写todos = todos.filter(...)这类代码，你只是把函数内部的局部变量todos重新指向了新数组，完全没有改动Immer跟踪的draft对象，这个写法同样不会生效。

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