Update очень глубокий объект с расширенным оператором

Question

У меня есть объект, который выглядит следующим образом:

state: { 
    "1": { 
     "show": false, 
     "description": "one", 
     "children": { 
     "1": { "show": false, "description": "one" }, 
     "2": { "show": false, "description": "one" } 
     } 
    }, 
    "2": { 
     "show": false, 
     "description": "one", 
     "children": { 
     "1": { "show": false, "description": "one" }, 
     "2": { "show": false, "description": "one" } 
     } 
    } 
    } 

У меня есть цикл, изменяющие дети «шоу» собственность на противоположное логическое значение. Поэтому я пытаюсь обновить это значение, но не работает.

 for (var childKey in state[appClassId].children) { 
     newState = { 
      ...state, 
      [appClassId]: { 
      children: { 
       [childKey]: { ...state[appClassId].children[childKey], show: !state[appClassId].children[childKey].show} 

      } 
      } 

переменная «appClassId» - это переменная, которую я получаю от действия.

Как я могу обновить каждый ключ в детской собственности, например state.1.children.1.show

Answer 1

я рекомендовал бы, опираясь на a utility library like lodash.js в дополнение к оператору спреда, если вы делаете что-либо более сложным, чем назначая значение или два.

Предполагая, что число appClassId с внутри state и children внутри каждый appClass полностью динамическое:

import { reduce } from 'lodash' 

const newState = reduce(state, (modifiedState, appClass, appClassId) => { 
    const { children } = appClass 
    // toggle show for each child (non-mutating) 
    const toggledChildren = reduce(children, (newChildren, child, childId) => { 
    return { 
     ...newChildren, 
     [childId]: { ...child, show: !child.show } 
    } 
    }, {}) 

    // persist modified children within the appClass 
    return { 
    ...modifiedState, 
    [appClassId]: { 
     ...appClass, 
     children: toggledChildren 
    } 
    } 
}, {}) 

Надеется, что это помогает!

Answer 2

попробовать это:

const originalChildren = state[appClassId].children; 
let updatedChildren = {}; 

for (var child in originalChildren) { 
    if (originalChildren.hasOwnProperty(child)) { 
     updatedChildren = { 
     ...updatedChildren, 
     [child]: { ...originalChildren[child], show: !originalChildren[child].show } 
     }; 
    } 
} 

const newState = { 
    ...state, 
    [appClassId]: { 
    ...state[appClassId], 
    children: { ...originalChildren, ...updatedChildren } 
    } 
} 

Answer 3

С помощью @markerikson автора:

http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html

я смог обновить этот глубокий уровень вложенных данных:

объекта для обновления находятся все объекты под свойством «дети» этого объекта:

state: { 
    "1": { 
     "show": false, 
     "description": "one", 
     "children": { 
     "1": { "show": false, "description": "one" }, 
     "2": { "show": false, "description": "one" } 
     } 
    }, 
    "2": { 
     "show": false, 
     "description": "one", 
     "children": { 
     "1": { "show": false, "description": "one" }, 
     "2": { "show": false, "description": "one" } 
     } 
    } 
    } 

И код для обновления это:

let newState = {}; 
newState = { ...state, newState } 

for (var childKey in newState[appClassId].children) { 
    newState = { 
    ...newState, 
    [appClassId]: { 
     ...newState[appClassId], 
     children: { 
     ...newState[appClassId].children, 
     [childKey]: { 
      ...newState[appClassId].children[childKey], 
      show: !newState[appClassId].children[childKey].show 
     } 
     } 
    } 
    } 
}