操作 deeply-nested 数据 object（在 React 中）

Question

我在 React 中有一个应用程序，在基本级别上，它是一个显示来自任意数量的二级 "child" 资源的数据的文档，每个 child 显示来自任意数量的第 3 级 "grandchild" 资源，每个 grandchild 显示来自任意数量的第 4 级 "great-grandchild" 资源的数据。

这是从我的 API 服务器检索到的基本 JSON 结构：

{ id: 1,
  children: [
    { id: 1,
      grandchildren: [
        { id: 1,
          greatgrandchildren: [{ id: 1 }, { id: 2 }, ...]
        },
        ...
      ]
    },
    ...
  ]
}

每个级别的 object 都有一些额外的属性，为简单起见，我没有在此处显示。

按照推荐的 React 做事方式，这个 object 在我的应用程序加载时被检索并设置为状态 top-level 组件，然后相关数据被传递为道具到 children 以构建反映此结构的组件树。

这很好，但是我需要能够对每个资源执行 CRUD (create/read/update/delete) 操作，结果很痛苦 因为需要通过整个数据 object 到 setState() 而我只是想修改它的一小部分 。它在顶层或第二层并没有那么糟糕，但是由于需要迭代，任何超过它的东西都会很快变得笨拙，根据 id 获取我想要的 object，更改它，然后构建一个整个结构的副本，只是那个位改变了。 React 插件提供了一个 update() 函数，它很有用，但实际上只对最后一步有帮助——我仍然需要处理嵌套迭代并在其外重建相关数组。

增加了额外的复杂性，因为我的目标是使用临时数据乐观地更新视图，然后使用从服务器返回的正确数据再次更新它（成功时）或恢复（失败时）。这意味着我需要小心地保留旧 data/state 的副本而不改变它（即共享参考）。

最后，我目前为 top-level 组件上定义的每个级别的每个 CRUD 操作都有一个回调方法（总共 12 个方法）。这似乎有些过分，但它们都需要调用 this.setState() 的能力，而且我发现很难弄清楚如何重构它们之间的共性。我已经有一个单独的 API object 来执行实际的 Ajax 调用。

所以我的问题是：是否有更好的 React-suitable 方法来处理 CRUD 操作并使用像我这样的嵌套数据结构为它们操纵数据，以允许乐观更新的方式？

Answer 1

从表面上看，flux architecture 可能就是您正在寻找的答案。在这种情况下，您将对每种类型的资源有一个 Store（或者可能对所有资源有一个 Store，具体取决于数据的结构），并让视图监听数据的变化他们关心。

Answer 2

经过一些研究，我开始明白状态改变问题是不可变库（如 immutable.js and mori）似乎成为 React 社区热门话题的原因之一，因为它们有助于修改深层嵌套结构的小部分，同时保持原始副本不变。经过一些重构后，我能够更好地利用 React.addons.update() 帮助程序并将内容缩小一点，但我认为使用这些库之一将是下一个合乎逻辑的步骤。

至于 structure/organization 的东西，似乎 Flux（或 MV* 等其他架构）的存在就是为了解决这个问题，这是有道理的，因为 React 只是一个视图库。

操作 deeply-nested 数据 object（在 React 中）

Manipulating a deeply-nested data object (in React)

javascript

reactjs