javascript - React 中的数据管理策略

Question

背景/背景

现在在一些项目中，我似乎面临着一个普遍的问题，但我仍然觉得自己没有找到解决它的可靠方法。

我正在使用 React、Redux 和 React Router。

当前状态

最简单的是，我有一个页面，其中包含一系列可保存的表单，所有这些表单都可以存在于查看模式和编辑模式中:

+--------------------------+
| EDIT MODE                |
+--------------------------+
|                          |
|  <input name="A"/>       |
|  <input name="B"/>       |
|                          |
|  <button label="save"/>  |
+--------------------------+
|                          |
|  <input name="C"/>       |
|  <input name="D"/>       |
|                          |
|  <button label="save"/>  | 
+--------------------------+

+--------------------------+
| VIEW MODE         [edit] |
+--------------------------+
|  readonly A              |
|  readonly B              |
|                          |
|  readonly A              |
|  readonly B              |
+--------------------------+

所有表单都包含在一个 Request 组件中，该组件采用端点属性，并在挂载时获取数据。请求完成后，它将呈现其子项。

示例页面:url:owner/1/pets

const ownerId = props.params.id;

<Request endpoint={`api/owner/{ownerId}/pets`}>
    <OwnerDetails id={ownerId} />     
    <Pets ownerId={ownerId} />
  }}
</Request>

请求成功后的 reducer (注意已经规范化):

{
    "tables": {
        "pets": {
            "1": { "id":"1", "name":"max", "owner": 1 },
            "2": { "id":"2", "name":"yella", "owner": 1 }
        },
        "owner": {
            "1": { "id":"1", "name": "jim" }
        }
    }
}

然后每个 Form 都是一个连接的组件，并且根据一个简单的传入 id 知道它需要的状态切片。

每个表单还有一个 onChange Action ，它被传递到每个表单输入。 onChange 更新状态的“草稿”切片。

因此当用户在宠物 1 的编辑模式下输入以下内容时:

完整状态如下:

{
    "tables": {
        "pets": {
            "1": { "id":"1", "name":"max", "owner": 1 },
            "2": { "id":"2", "name":"yella", "owner": 1 }
        },
        "owner": {
            "1": { "id":"1", "name": "jim" }
        }
    },
    "draft": {
        "pets": {
            "1": { "name": "new name" },
        }
    }
}

Action / reducer

onChange => # updates the draft slice of state
save =>     # sends all data in draft to the server to be saved, upon being saved, the draft slice for that particular form is emptied, and table slice is updated with new data - in other words, the table slice is always the latest reflection of the server. 

在编辑模式下，连接的表单将抓取表格状态并将其与草稿状态合并以“获取完整图片”。因此，如果我们处于上面的当前 reducer 状态，并查看 pet 1，连接的表单将获取所有 tables.pets.1 数据，然后合并顶部的 draft.pets.1 数据。在 View 模式下，它只需要抓取表格数据(在 View 模式下草稿数据被忽略)。

问题

这感觉有点煮过头了。提取和合并草稿和表格数据感觉很尴尬，即使在使用选择器时也是如此。当表单可以嵌套元素时，更新和从状态存储切片中提取数据的问题会加剧。

问题

处理草稿和状态中可能存在的复杂、多种形式的更具体策略是什么？

Answer 1

总体而言，这似乎是一种相当可靠的方法。它实际上与我在自己的应用程序中所做的非常接近，尽管我不必“合并”数据本身——当我开始编辑时，与正在编辑的项目相关的所有数据都会被复制到“草稿”切片.

但是，是的，我觉得这种方法不错。

编辑

更新:我在 Redux-ORM 上发表了几篇文章作为 a series on "Practical Redux" 的前两部分，讨论我根据自己的 Redux 经验开发的技术。我计划在以后的帖子中讨论“草稿编辑”概念。

第二次更新:我刚刚发布了 Practical Redux Part 8: Form Draft Data Management ，它展示了如何实现此处描述的方法。