Immutable.js 更新深度嵌套地图

Question

我在更新 redux 存储时遇到问题。我存储了表格数据，更新补丁随选择和要更新的值一起提供。商店的状态如下所示：

const state = fromJS({
  data: {
    rows: {
      row1: {
        col1: { amount: 1 },
        col2: { amount: 1 },
        col3: { amount: 1 },
        col4: { amount: 1 },
      },
      row2: {
        col1: { amount: 2 },
        col2: { amount: 2 },
        col3: { amount: 2 },
        col4: { amount: 2 },
      },
      row3: {
        col1: { amount: 3 },
        col2: { amount: 3 },
        col3: { amount: 3 },
        col4: { amount: 3 },
      },
      row4: {
        col1: { amount: 4 },
        col2: { amount: 4 },
        col3: { amount: 4 },
        col4: { amount: 4 },
      },
    }
  }
});

const newAmount = 5;

const selection = [
  { row: 'row1', column: 'col1' },
  { row: 'row1', column: 'col2' },
  { row: 'row2', column: 'col1' },
  { row: 'row2', column: 'col2' },
];

选择只能是一个单元格或一行或多行中的多个单元格。每个单元格都应该更新为相同的值。更新商店的正确方法是什么，以便下一个状态看起来像这样。

const nextState = fromJS({
  data: {
    rows: {
      row1: {
        col1: { amount: 5 }, // updated with newAmount 
        col2: { amount: 5 }, // updated with newAmount
        col3: { amount: 1 },
        col4: { amount: 1 },
      },
      row2: {
        col1: { amount: 5 }, // updated with newAmount
        col2: { amount: 5 }, // updated with newAmount
        col3: { amount: 2 },
        col4: { amount: 2 },
      },
      row3: {
        col1: { amount: 3 },
        col2: { amount: 3 },
        col3: { amount: 3 },
        col4: { amount: 3 },
      },
      row4: {
        col1: { amount: 4 },
        col2: { amount: 4 },
        col3: { amount: 4 },
        col4: { amount: 4 },
      },
    }
  }
});

Answer 1

我能找到的最简单的方法（代码方面）是：

const newState = state.withMutations(newStore => {
  selection.forEach((selection) => {
    newStore.setIn(['data', 'rows', selection.row, selection.column, 'amount'], newAmount)
  }) 
})

这种方法的好处是您只需重复要更改的内容。我认为没有 withMutation 就不值得这样做，因为代码看起来很难处理。

Immutable.js 更新深度嵌套地图

Immutable.js update deeply nested Map

javascript

immutable.js

redux