在规范化的 Redux 数据结构中重新排序对象序列

Question

我有一个由字符串 ID 索引的标准化 Redux 数据结构。在其他属性中，状态中的每个对象都有一个sequenceNumber，用于在列表或网格中按顺序显示它。可以拖放项目以重新排序。

我正在努力寻找一种简洁、纯粹的方法来更新序列号。在 Redux 减速器中执行此操作的好方法是什么？

---

我目前的state数据结构本质上是：

{
    'asdf': { title: 'Item 1', sequence: 0, ... },
    '1234': { title: 'Item 2', sequence: 1, ... },
    'zzzz': { title: 'Item 3', sequence: 2, ... }
}

我的行动是

{ type: REORDER_ITEMS, oldRow: 1, newRow: 0 }

这应该导致状态

{
    'asdf': { title: 'Item 1', sequence: 1, ... },
    '1234': { title: 'Item 2', sequence: 0, ... },
    'zzzz': { title: 'Item 3', sequence: 2, ... }
}

我当前的 reducer 使用 Object.keys(state).reduce() 循环遍历项目并根据它们是否等于、大于或小于所需的行号来一一修改 sequence。有没有更简洁的方法来管理这个？

Answer 1

您可以进一步规范化：在单独的状态切片中提取序列并将顺序存储为 id 数组。

{
  items : {
    'asdf': { title: 'Item 1', ... },
    '1234': { title: 'Item 2', ... },
    'zzzz': { title: 'Item 3', ... }
  },
  sequence: ['1234', 'asdf', 'zzzz']
}

这样，您可以使用单独的 reducer 来处理修改序列的操作，仅使用数组操作。