Question

我在更新不可变redux和非常嵌套的数据时遇到问题。这是我的数据结构和我想要改变的一个例子。如果有人能告诉我使用ES6和传播操作符访问此更新的模式，我将非常感激。

我的整个状态是一个带有项目的对象（键/值对 - 这里只是一个项目的例子），它们是具有自己的键的对象（键也是ID），过程数组和任务内部：

{ 1503658959473: 
  { projectName: "Golden Gate",
    projectLocation": "San Francisco",
    start:"22/09/1937",
    id:1503658959473,
    procedures:[
      { title: "Procedure No. 1",
        tasks:[
          {name: "task1", isDone: false},
          {name: "task2", isDone: false},
          {name: "task3", isDone: false}
        ]
      }
    ]
  }
 }

我愿意做的是更新一项任务＆＃39; isDone＆＃39;属于＆＃39; true＆＃39;。这是某种切换任务的方式。 如何在更新该信息的情况下返回此状态？

动作创建者将此信息传递给reducer：

export function toggleTask(activeProject, task, taskIndex) {
 return {
    type: TOGGLE_TASK,
    payload: {
        activeProject,
        task,
        taskIndex
    }
 };

}

Answer 1

您遇到了Redux的常见问题。文档建议您展平数据结构以便于使用，但如果这不是您想要做的，请参考此part of their docs。

由于Object.assign()和...spread运算符都创建浅副本，因此必须遍历对象中的每个嵌套级别并重新复制它。

您的代码可能看起来像这样......

function updateVeryNestedField(state, action) {
    return {
        ...state,
        procedures : {
            ...state.procedures,
            tasks : {
               return tasks.map((task, index) => {
                 if (index !== action.taskIndex) {
                   return task
                 }
                 return {
                   ...task,
                   task.isDone: !task.isDone 
                 }
               }
            }
        }
    }
}

Answer 2

我自己会创建一个名为ProjectModel的新类，它有一个公共方法toggleTask，可以更新其任务的状态。 reducer状态是一个对象，其键是项目ID，值是ProjectModel个实例。

Redux更新嵌套的不可变数据

2 个答案: