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更新嵌套的不可變數據

回答

相關問題