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

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

您正在尝试直接修改您的状态。这是禁止不可变的。您可以使用 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

我根据 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");
});

现在状态项已成功排序。

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

How to shift object in Immutable Js Ordered map.?

store

shift

reactjs

immutable.js

redux

状态如下：

减速器代码：