How to shift object in Immutable Js Ordered map.? - reactjs

Question

I am working with redux, configured state as Immutable Js Ordered Map.
Below is the state:
{
"layers": {
"items": {
"yrgroih9": {
"width": '300px',
"x": '700px',
"y": '700px'
},
"qhy0dukj": {
"width": '160px',
"x": '500px',
"y": '500px'
},
"7lw2nvma": { //Target object
"width": '250px',
"x": '300px',
"y": '300px'
},
"jdkhsd9d": {
"width": '280px',
"x": '100px',
"y": '100px'
}
}
}
}
I want to shift the key 7lw2nvma one step up, & below is i want:
{
"layers": {
"items": {
"yrgroih9": {
"width": '300px',
"x": '700px',
"y": '700px'
},
"7lw2nvma": { //Shifted object
"width": '250px',
"x": '300px',
"y": '300px'
},
"qhy0dukj": {
"width": '160px',
"x": '500px',
"y": '500px'
},
"jdkhsd9d": {
"width": '280px',
"x": '100px',
"y": '100px'
}
}
}
}
Reducer code:
import { OrderedMap, fromJS } from 'immutable';
export default function myApp(state = new OrderedMap, action) {
switch (action.type) {
case 'SHIFT_OBJECT':
var shiftObj = "7lw2nvma"; //Known value
//return state.getIn(["layers","items"]).shift(shiftObj); // Something like this to shift object.
}
}
Help me to get the desired output.
Note: If it is not possible in OrderedMap, then say with List.

Answer 1

I found answer based on sortBy function in Immutable Js OrderedMap.
Now i added index values in that object as shown below:
{
"layers": {
"items": {
"yrgroih9": {
"index":0,
"width": '300px',
"x": '700px',
"y": '700px'
},
"qhy0dukj": { //Another known value
"index":1,
"width": '160px',
"x": '500px',
"y": '500px'
},
"7lw2nvma": { //Target object (shift up)
"index":2,
"width": '250px',
"x": '300px',
"y": '300px'
},
"jdkhsd9d": {
"index":3,
"width": '280px',
"x": '100px',
"y": '100px'
}
}
}
}
I have two known values 7lw2nvma & qhy0dukj.
Using setIn changed 7lw2nvma index as 1 & qhy0dukj index as 2.
Using sortBy function i can sort object based on modified index values.
var getSorted = state.getIn(["layers","items"]).sortBy(function(value, key) {
return value.get("index");
});
And now the state items sorted successfully.

Answer 2

You are trying to modify directly your state. That is forbidden for an immutable.
You can use Object.assign to create a new one.
return Object.assign({}, state.getIn(["layers","items"]).shift(shiftObj))
EDIT: You can use an array of your keys, sort it as you like and construct a new object for your state.
Something like:
let tab = Object.keys(state.getIn(["layers","items"]))
tab.sort() // sort keys by name
const obj = tab.reduce((o, key) => Object.assign(o, {[key]: state.getIn(["layers","items"])[key]}), {}) //contruct a new object from your ordered array and current state, you can also create another const on state.getIn(["layers","items"]) to increase perfs
console.log(obj)
return obj