在 React/Redux 中创建新项目并稍后保存到服务器答案

【问题标题】：Creating new items in React/Redux and saving to server later在 React/Redux 中创建新项目并稍后保存到服务器
【发布时间】：2018-07-05 00:08:30
【问题描述】：

我正在使用 React/Redux 构建一个 Web 应用程序，但我有一个问题想出一个简单的解决方案：创建一个新的（嵌套的）记录并稍后将其保存到服务器。

我正在使用 normalizr 创建一个平面状态树。基本上我的（相关）状态结构如下所示：

projects: {
  as1234hhafs: {
    _id: as1234hhafs
    pages: [kljafsldasdf, asdfas8990],
    ...
  }
},
pages: {
  kljafsldasdf: {
    _id: kljafsldasdf,
    name: 'New page',
    ...
  },
  asdfas8990: {
    _id: asdfas8990,
    name: 'New page 2',
    ...
  }
}

每个项目都有一个子文档数组。我想要做的是创建一个新页面（子文档）并编辑它的数据（和子文档）并在单击时将其保存到服务器。但是我不知道如何使用推荐的 redux/normalizr 状态结构来实现这一点。

如果商店还没有 ID，我如何向商店添加新记录？一旦服务器的响应分配了记录和 ID，我将如何管理它？

我希望我的问题足够清楚。

【问题讨论】：

标签： javascript reactjs redux normalizr

【解决方案1】：

两种可能的方法：

将未保存的条目存储在状态的单独部分，例如在不需要 id 的数组中。一旦它们被保存并且你知道 id，就将它们移动到一组持久对象中。合并两组对象以在 UI 上显示它们应该不会太复杂。
在前端生成 id 根据您要进行的权衡，这可能是一个递增的数字、一个随机的 UUID 或完全不同的东西。然后，您可以在保存记录后将此临时 ID 替换为永久 ID。

请注意，这不是一个详尽的列表，还有许多其他可能的方法。只是为了让你开始。

【讨论】：

非常感谢！关于方法 2：一旦我得到响应，我将如何将前端生成的 ID 与服务器分配的 ID 映射？
一种常见的方法是将临时 id 传递到后端并返回到前端，以将前端的草稿与后端的永久记录相匹配。

【解决方案2】：

您可以生成本地（前端）ID 并将后端 ID 存储为每个页面的属性。需要时使用后端 ID。

或者，您可以将未保存的页面存储在状态树中的另一个位置，但这会使页面组件的信息源更加复杂。

【讨论】：