Reputation: 1969
I am trying to update two(width
& x
) values inside items
-> yrgroih9
as given below:
{
appElements: {
layers: {
layer_1: {
background: {
width: '100px',
height: '100px',
bgColor: '#aaaaaa',
bgImage: 'http:bgimage1.png'
},
items: {
yrgroih9: {
width: '100px',
x: '200px',
y: '200px'
},
qhy0dukj: {
width: '100px',
x: '200px',
y: '200px'
},
'7lw2nvma': {
width: '100px',
x: '200px',
y: '200px'
}
}
}
}
}
}
Code used to update new object inside items
-> yrgroih9
:
case 'UPDATE_OBJECT':
return state.setIn(["appElements","layers","layer_1","items","yp57m359"],{
["width"]: action.objData.width,
["x"]: action.objData.x
});
The above code removes y
key inside the current location yrgroih9
and updates the width
and x
values.
Redux store data arranged after setIn: (from chrome redux devtools):
How to update two deep values without removing the other key values.?
Upvotes: 5
Views: 2820
Reputation: 6576
Use updateIn.
If your items are instances of Immutable.js Map:
case 'UPDATE_OBJECT':
return state.updateIn(['appElements', 'layers', 'layer_1', 'items', 'yrgroih9'],
(item) => item
.set('width', action.objData.width)
.set('x', action.objData.x)
);
If your items are plain JS objects:
case 'UPDATE_OBJECT':
return state.updateIn(['appElements', 'layers', 'layer_1', 'items', 'yrgroih9'],
(item) => ({
...item,
width: action.objData.width,
x: action.objData.x,
})
);
Upvotes: 5
Reputation: 244
state.setIn replace the whole object in the path you have given (appElements -> layers -> layer_1 -> items -> yp57m359). You can get an existing object, modify fields and then use setIn:
const oldObject =
state.hasIn(["appElements","layers","layer_1","items","yp57m359"])
? state.getIn(["appElements","layers","layer_1","items","yp57m359"])
: {};
const newObject = {
...oldObject,
width: action.objData.width,
x: action.objData.x
};
return state.setIn(["appElements","layers","layer_1","items","yp57m359"], newObject);
Upvotes: 0