Javascript React中的数据管理策略 背景/背景

在现在的一些项目中，我似乎面临着一个共同的问题，我仍然觉得我没有找到一个解决这个问题的可靠方法

我正在使用React、Redux和React路由器

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

+--------------------------+
| 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              |
+--------------------------+

请求成功后的减速器（注意已正常化）：

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

每个表单还具有一个onChange操作，该操作将传递给每个表单输入。onChange更新状态的“草稿”部分

因此，当用户在pet 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" },
        }
    }
}

动作/减速器 在编辑模式下，连接的表单将抓取并合并表格状态和草稿状态，以“获得完整信息”。因此，如果我们处于上面的当前reducer状态，并且查看pet 1，那么连接的表单将获取所有表.pets.1数据，然后合并到top draft.pets.1数据上。在视图模式下，它只需要获取表数据（在视图模式下忽略草稿数据）

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

问题

---

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

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

但是，是的，这种方法在我看来很好

编辑

更新：我已经在Redux ORM上发表了几篇文章，作为本文的前两部分，讨论了我根据自己使用Redux的经验开发的技术。我计划在以后的文章中讨论“草稿编辑”的概念

---

第二个更新：我刚刚发布了一篇文章，展示了如何实现这里描述的方法。

我建议您使用规范化结构。 1） 你将减少内存的使用。 2） 更新会很容易。

---

为此，我相信，这将是非常棒的。

谢谢@markerikson（也谢谢你在reddit的投入和巨大的魅力列表中为react社区做出的卓越贡献）。我曾讨论过在单击“编辑”时将其复制到草稿中-这可能会简化一些事情。我只是想补充一下上面的评论-似乎redux orm可以很好地简化前端的数据结构，尤其是在映射到后端时。是的，我可能是redux orm最重要的推动者（甚至比它的作者@tommikaikkonen还要多！）我在我的应用程序中大量使用它。事实上，我希望写一系列博客文章来描述我在我的应用程序中想到的东西，“使用Redux ORM”和“管理草稿数据”是我想涵盖的两个主题。我在几周前列出了我计划中的主题。目前正试图找出一些合理的场景作为帖子的背景。太棒了！我会留意的！我会在/r/reactjs上查看文章发布的时间。谢谢。我还没有在那里提交任何帖子，但是我想我可以。我一直在推特上发布一个链接。如果你想订阅这个博客，它就在。我真的很想在这个周末的后期准备方面取得一些进展，但我们会看看它是如何进行的。最大的问题是我想给出一些好的示例和用例，而不仅仅是抛出一些复制的代码和一些解释。

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

{
    "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" },
        }
    }
}

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.