React 和 redux，对象层次结构和 REST api 的模块化编辑答案

【问题标题】：React and redux, modular editing of object hierarchy and REST apiReact 和 redux，对象层次结构和 REST api 的模块化编辑
【发布时间】：2016-06-22 04:34:47
【问题描述】：

我有 Foo 对象，它有一个 Bars 数组。它们是数据库中单独的表，并且都是单独的 REST api 资源。

{
  id: 1,
  data: foo,
  bars: [
    { fooId: 1, data: bar1 },
    { fooId: 2, data: bar2 }
  ]
}

我想创建类似于编辑器的表单，让我可以查看、编辑、添加和删除特定 Foo 的 Bar's。我发现我将 BarsComponent 嵌套在 FooComponent 中，并进一步嵌套 BarComponent 以保存对单个 Bar 的引用。该组件应该为 Bar prop 绘制双向绑定输入框和删除按钮。 BarsComponent 也应该呈现添加按钮。会有多个像 Bars 这样的孩子。

问题是保存按钮在 FooComponent 中，所以我必须在单击时知道发生了什么变化以及在哪里调度正确的 Redux 操作 与特定域对象.复杂性来自于用户能够在任意子组件中执行所有 CRUD 操作，而我需要上层的这些信息。

管理这种复杂性的批准方法是什么？是否可以为更改创建一个 Redux 状态，并在保存单击处理程序中扫描该状态并分派发现的更改？

【问题讨论】：

恕我直言，您不应该在需要时扫描状态，而是在每次内部状态发生变化时通过回调通知父母。然后父母总是得到发送“保存”请求所需的信息

标签： javascript rest design-patterns reactjs redux

【解决方案1】：

你的 FooComponent 应该有一个函数，它传递给它创建的每个 BarComponents。 BarComponents 在任何数据更改时调用该函数，这允许 FooComponent 保存和管理所有更改并将更改向下推送到 BarComponent通过它的道具。

例如，如果 BarComponent 有几个输入框，那么每个输入框都将其 onChange 事件设置为从 FooComponent 传递下来的函数，该函数保存并管理更改数据。

您可能需要考虑的其他一点是您如何在 Redux 中保存数据。您可能希望将每个 Bar 对象保留在以键为 id 的父 Bar 对象中，而不是 Foo 对象（或 Foo 对象的集合）与数组中的 Bar 对象。例如：

Bar {
  '1': {
    name: 'John'
  },
  '2': {
    name: 'Sally'
  }
}

并且 Foo 对象将具有映射到该对象中的键的 Id 数组。这将与服务器端数据库非常相似，并且可能使您在 redux/react 中管理数据更容易。

我发现了一个缺点，但你应该知道这一点。我对每个对象都有一个减速器，因此它们对另一个对象一无所知。这似乎是常见的（好的）redux 实践。所以我不能做的一件事是在 reducer 中对 Id 数组（例如按日期）进行排序，我通常最终不得不将其推送到呈现数组的组件。这有时确实有一个优势，因为有时我最终会过滤数组，因此排序会处理更少的元素。

【讨论】：