时间戳

首页 > 解决方案 > 在反应减速器中将数据添加到复杂状态

reactjs - 在反应减速器中将数据添加到复杂状态

问题描述

我有一个管理以下状态的反应减速器

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 操作对象中

标签： reactjstypescript

解决方案

好吧，显而易见的方法是不可变地更新这个状态，例如，假设我有一个ADD_NOTE动作，它可能看起来像这样：

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

然后，此操作的 reducer 的示例返回语句将是：

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

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

另一个可能让您的生活更轻松的解决方案是使用帮助库，例如https://github.com/kolodny/immutability-helper或https://github.com/immerjs/immer

推荐阅读