如何在Redux中的不可变Js Map中深度更新两个值？

Question

我正在尝试更新-> 内部的两个（width＆x）值，如下所示：itemsyrgroih9

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

用于在 items ->中更新新对象的代码yrgroih9：

case 'UPDATE_OBJECT':
  return state.setIn(["appElements","layers","layer_1","items","yp57m359"],{
    ["width"]: action.objData.width,
    ["x"]: action.objData.x
  });

上面的代码删除y了当前位置内的键，yrgroih9并更新了width和x值。

Redux存储在setIn：之后排列的数据（来自chrome redux devtools）：

如何在不删除其他键值的情况下更新两个深度值？

Answer 1

使用updateIn。

如果您的项目是Immutable.js地图的实例：

case 'UPDATE_OBJECT':
  return state.updateIn(['appElements', 'layers', 'layer_1', 'items', 'yrgroih9'],
    (item) => item
      .set('width', action.objData.width)
      .set('x', action.objData.x)
  );

如果您的项目是普通的JS对象：

case 'UPDATE_OBJECT':
  return state.updateIn(['appElements', 'layers', 'layer_1', 'items', 'yrgroih9'],
    (item) => ({
      ...item,
      width: action.objData.width,
      x: action.objData.x,
    })
  );