如何正确修改Redux state中嵌套对象的指定属性值

错误原因 #

你现有写法存在3个问题：

• 展开旧course_notes数组后直接追加了赋值表达式的返回值"edited"，相当于给数组新增了第三个元素，所以长度变成3
• 直接修改原state中id=1的note对象属性，属于突变原状态，违反Redux不可变更新原则，会导致状态变更检测失效
• 重写course对象时没有保留原有字段（比如title），会导致原有字段丢失

正确实现 #

按照不可变更新要求，每一层嵌套的引用都需要更新，代码如下：

const m = {
  ...state, // 保留根级其他字段：courses、series
  course: {
    ...state.course, // 保留course下的其他字段：title
    course_notes: state.course.course_notes.map(note => {
      // 匹配到目标id时返回全新对象，其他项原样返回
      if (note.id === 1) {
        return {
          ...note,
          note: "edited"
        }
      }
      return note
    })
  }
}

简化方案 #

如果项目嵌套层级较多，手动逐层展开容易出错，可以引入Immer库来简化不可变更新逻辑，写法如下：

import produce from 'immer'

const m = produce(state, draft => {
  const targetNote = draft.course.course_notes.find(n => n.id === 1)
  if (targetNote) targetNote.note = "edited"
})

Immer会自动帮你处理所有层级的不可变更新，不需要手动展开对象/数组，大幅降低出错概率。

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