Redux Toolkit中向数组state push元素时原有数据丢失如何解决

你写的addPositionAction reducer 本身逻辑符合RTK的用法规范，push操作在immer代理下会正确生成不可变更新，不会清空原有数据，问题出在其他环节，按以下顺序排查即可：

排查步骤 #

• 首先检查你派发的action是否正确，有没有手滑把addPositionAction写成了setPositionsAction：

  // 常见错误写法，会直接覆盖数组为新值
  dispatch(setPositionsAction(response)) 
  // 正确写法
  dispatch(addPositionAction(response))
  

• 检查所有调用setPositionsAction的逻辑，是否存在异步请求前后误触发该action传入空数组/仅新数据的情况，比如你是否在请求发起前执行了dispatch(setPositionsAction([]))清空数组，后续流程出现异常没有走到追加逻辑。
• 确认你的slice名称唯一，不存在其他name: "user"的重复slice，重复的slice名称会导致reducer冲突，状态被意外覆盖。
• 可以在reducer内加日志确认执行时的状态，注意要使用RTK导出的current函数才能打印出代理对象的真实值：

  addPositionAction(state, { payload }) {
    console.log('追加前数据：', current(state.positions))
    state.positions.push(payload)
    console.log('追加后数据：', current(state.positions))
  }
  

  如果此处日志显示追加前后数据符合预期，说明问题出在其他reducer或者状态取值逻辑，再去排查你获取positions状态的useSelector写法是否正确即可。

补充说明 #

如果你传入的response本身是数组，想要把数组内所有元素追加到原数组，需要修改push逻辑为展开传参：

addPositionAction(state, { payload }) {
  state.positions.push(...payload)
}

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