Tengo un objeto que se ve así:
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" } } } }Tengo un bucle for que cambia la propiedad "mostrar" de los niños al valor booleano opuesto. Así que trato de actualizar el valor con esto pero no funcionó.
for (var childKey in state[appClassId].children) { newState = { ...state, [appClassId]: { children: { [childKey]: { ...state[appClassId].children[childKey], show: !state[appClassId].children[childKey].show} } }La variable "appClassId" es una variable que obtengo de la acción.
¿Cómo puedo actualizar cada clave en la propiedad secundaria, por ejemplo, state.1.children.1.show?
Con la ayuda de @markerikson autor de:
http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html
Pude actualizar ese nivel profundo de datos anidados:
El objeto a actualizar son todos los objetos bajo la propiedad "hijos" de este objeto:
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" } } } }Y el código para actualizarlo es:
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 } } } } }Recomendaría apoyarse en una biblioteca de utilidades como lodash.js además del operador de propagación si está haciendo algo más complejo que asignar uno o dos valores.
Suponiendo que la cantidad de appClassId dentro del state y los children dentro de cada appClass son completamente dinámicos:
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 } } }, {})¡Espero que esto ayude!
prueba esto:
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 } } }