Redux更新嵌套的不可变数据

我在更新不可变的redux和相当嵌套的数据时遇到了问题。这里是我的数据结构和我想改变的一个例子。如果任何人都可以向我展示使用ES6和传播运营商访问此更新的模式，我会很感激。Redux更新嵌套的不可变数据

我的整个状态是一个带有项目（键/值对 - 这里仅作为一个项目的示例）的对象，它们是具有其自己的键（且键也是ids）的对象，过程数组以及任务内部：

{ 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} 
     ] 
     } 
    ] 
    } 
}

我愿意做的是将单个任务'isDone'属性更新为'true'。这是某种切换任务的方式。 如何更新此信息并返回此状态？

行动的创建者将此信息传递给减速机：

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

}

来源

2017-09-05 Mateusz Szymajda

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

来源

2017-09-05 15:38:51

您遇到了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 
       } 
       } 
      } 
     } 
    } 
}

来源

2017-09-05 15:45:59

Redux更新嵌套的不可变数据

回答

相关问题