如何在不可变 Js 有序映射中移动对象。？

Question

我正在使用 redux，配置状态为 Immutable Js Ordered Map。

下面是状态：

{
  "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'
       }
    }
  }
}

我想将键7lw2nvma 上移一步，下面是我想要的：

{
  "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'
       }
    }
  }
}

减速机代码：

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.
  }
}

帮助我获得所需的输出。

注意：如果在 OrderedMap 中不可能，那么用 List 说。

Answer 1

我根据 Immutable Js OrderedMap 中的sortBy 函数找到了答案。

现在我在该对象中添加了index 值，如下所示：

{
  "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'
       }
    }
  }
}

我有两个已知值 7lw2nvma 和 qhy0dukj。

使用 setIn 更改 7lw2nvma 索引为 1 和 qhy0dukj 索引为 2。

使用sortBy 函数我可以根据修改后的索引值对对象进行排序。

var getSorted = state.getIn(["layers","items"]).sortBy(function(value, key) {
  return value.get("index");
});

现在状态项排序成功。

Answer 2

您正在尝试直接修改您的状态。对于不可变的，这是禁止的。 您可以使用Object.assign 创建一个新的。

return Object.assign({}, state.getIn(["layers","items"]).shift(shiftObj))

编辑：您可以使用键数组，根据需要对其进行排序并为您的状态构造一个新对象。 比如：

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