时间戳

首页 > 解决方案 > 如何从 redux 的嵌套结构中创建/编辑/删除？

javascript - 如何从 redux 的嵌套结构中创建/编辑/删除？

问题描述

我正在逐行渲染表格中的嵌套数据。下面是一个简单的结构示例：

[
  {
    id: 1,
    children: [
      {
        id: 2,
        children: []
      },
      {
        id: 3,
        children: [
          {
            id: 4,
            children: []
          },
          {
            id: 5,
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 6,
    children: []
  },
  {
    id: 7,
    children: [
      {
        id: 8,
        children: [
          {
            id: 9,
            children: []
          }
        ]
      }
    ]
  }
]

如果我想在下创建一个新孩子id: 2，那么它来自

{
  id: 2,
  children: []
}

至

{
  id: 2,
  children: [
    {
      id: 10,
      children: []
    }
  ]
}

在这种情况下更新状态的正确方法是什么？我是否只是克隆整个数组并找到将有一个新孩子的 id 并将其放入它的 children[] 中，然后返回那个新的克隆数组？如果它是一个巨大的数组怎么办？

标签： javascriptreactjsredux

解决方案

使用 Redux，您必须以不可变的方式更新状态。你基本上有两个选择：

  1. 使用ES6 扩展运算符Object.assign或从当前状态对象生成新对象：请参阅不可变更新模式（Redux 文档）

  2. 使用为您执行此操作的多个库之一，我建议使用Immer，但还有其他选项，例如immutablejs。

我真的很喜欢 Immer，因为它允许我编写干净且易于阅读/维护的减速器。甚至你也可以对它使用变异方法。

推荐阅读