Redux Toolkit中state.filter未修改状态但state.map可正常生效问题

问题根因 #

Redux Toolkit 底层基于 Immer 实现可变写法的状态更新，reducer 函数仅支持两种合法更新逻辑：

• 直接修改传入的 state 变量的内部属性/内容
• 主动 return 一个全新的状态值，直接替换旧状态

你编写的 deleteCounter 方法中，state.filter() 会生成符合过滤规则的新数组，但你既没有将新数组赋值给 state，也没有将其作为返回值 return，旧状态完全没有被修改，因此方法不生效。

修复方案 #

直接将 filter 生成的新数组作为返回值即可：

deleteCounter: (state, action) => {
  return state.filter(x => x.id !== action.payload)
}

如果你偏好直接修改原数组的写法，也可以用 splice 实现：

deleteCounter: (state, action) => {
  const targetIndex = state.findIndex(x => x.id === action.payload)
  if (targetIndex !== -1) {
    state.splice(targetIndex, 1)
  }
}

额外优化说明 #

你其他几个 reducer 中调用的 map 是冗余逻辑：map 的核心作用是生成新数组，你没有用到它的返回值，只是修改数组项的属性，完全可以替换为更符合语义的写法，避免不必要的性能开销：

// 优化后的 incrementCount 示例
incrementCount: (state, action) => {
  const targetCounter = state.find(x => x.id === action.payload)
  if (targetCounter) targetCounter.value += 1
}

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