Question

我正在使用 redux ，已配置状态为Immutable Js 有序地图。

以下是州：

{
  "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向上移动一步，＆amp;以下是我想要的：

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

您正试图直接修改您的州。这是不可改变的。您可以使用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

Answer 2

我在不可变的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＆amp; qhy0dukj。

将setIn更改为7lw2nvma索引为1＆amp; qhy0dukj索引为2。

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

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

现在状态项已成功排序。

如何在Immutable Js Ordered map中移动对象。？

以下是州：

减速机代码：

2 个答案: