在反应减速器中添加复合状态数据。

Question

我有一个react reducer，它管理着以下几种状态。

const exampleState: INote[][] = [
  [
    { x: 3, y: 5, value: '4' },
    { x: 3, y: 6, value: '4' },
  ],
  [
    { x: 7, y: 3, value: '4' },
    { x: 8, y: 5, value: '7' },
    { x: 8, y: 5, value: '6' }
  ],
];

所以一个二维数组，包含了特定类型的对象的数组。由于某些原因，我想不出如何更新这种状态。我想特别是能够在特定的嵌套数组中添加一个INote的新实例（不突变原始状态）。我怎样才能实现这一点呢？我需要将对象添加到的数组的索引在我的reducers动作对象中。

Answer 1

好吧，显而易见的方法是不变地更新这个状态，比如说，我有一个 ADD_NOTE 动作，它可以看起来像这样。

{type: "ADD_NOTE", payload: { item: INote, index: number }}

然后，这个动作的reducer的返回语句是：

return state.map((arr, i) => i === index ? [...arr, item] : arr)

这将更新数组，并添加 item 到数组的末尾，并使用提供的动作索引。

另一种可能让你的生活更轻松的解决方案是使用帮助库，如 https:/github.comkolodnyimmutability-helper。 或 https:/github.comimmerjsimmer。

Answer 2

你需要使用一个数组的 objects 而不是数组 arrays 所以你可以添加一个 identifier 诸如 id 给每个 object 所以你可以更新那个特定的 object 基于其 id