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

Question

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

我正在使用 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 分配给记录，我将如何管理它？

希望我的问题够清楚了。

Answer 1

两种可能的方法：

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

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

Answer 2

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

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

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

Creating new items in React/Redux and saving to server later

javascript

reactjs

redux

normalizr