Redux 客户端数据存储的规范化多对多模式

我正在开发社交网络应用程序的浏览器前端。它有大量的关系数据，具有一对多（1:m）和大多数多对多（m:m）关系，如下表所示

我想在应用程序中使用Flux数据流体系结构。我正在将Vuex.js与Vue.js一起使用

正如Redux.js文档中所表达的那样，对于React，最好使用平坦、规范化、存储状态的形状，我认为Vue.js也是如此

• 职位有类别（m:m）
• 帖子有标签（m:m）
• 帖子有评论（1:m）
• post中有hashtag（m:m）//或者用户创建hashtag
• 帖子中有提及（m:m）//或者用户创建用户提及

• 用户喜欢帖子（m:m）

• 用户关注用户、帖子、帖子类别等（m:m）
• 用户最喜欢的帖子（m:m）

等等

我将需要显示与其他实体，如用户，评论，类别，标签的所有相关数据后饲料。因此，就像有一个1:many关系，将该关系的数据的多方放在一方中（可以说是父方），即使它实际上是多对多，通常对它们的查询也可以组成它们的父方，即posts。但是，我还需要反向查询存储状态，例如，获取带有某个类别或标记的帖子

在这种情况下，要做到这一点并不像对帖子那样容易。我需要一个关系实体，它为两个连接的数据实体保存id对，就像RDBMS中的连接表或关联表一样，以便于访问和更新，避免深入挖掘状态，也避免不必要的重新呈现（该要求是React或Vue.js和GUI特定的）

---

我怎样才能相对容易和有效地实现这一点，例如，像一个人对1:many关系所做的那样？

根据您最后的评论。我将介绍我目前在这种情况下使用的数据结构：

标记

{
 "type": "tag",
 "id": "tag1",
 "name": "Tag One"
}

要发布的标签

{
  "id": "someId",
  "type": "postTag",
  "tagId": "tag1",
  "postId": "post1"
}

{
 "id": "post1",
 "name": "Post 1"
}

{
 "id": "post1",
 "name": "Post 1"
 "tagIds" : ["tag1", "tag4"]
}

发布

{
  "id": "someId",
  "type": "postTag",
  "tagId": "tag1",
  "postId": "post1"
}

{
 "id": "post1",
 "name": "Post 1"
}

{
 "id": "post1",
 "name": "Post 1"
 "tagIds" : ["tag1", "tag4"]
}

我发现存储关系ID的M:M的每一边都可能产生孤儿。在两个位置管理这些ID会导致复制步骤和认知管理的增加，因为管理M:M的所有功能都发生在两个位置而不是一个位置。此外，关系本身可能需要包含数据，这些数据会去哪里

M:M无实体

{
 "id": "post1",
 "name": "Post 1"
 "tagIds": [
   {id: "tag1", extraAttribute: false} //this is awkward
 ] 
}

标记到Post-其他属性

{
  "id": "someId",
  "extraAttribute": false,
  "postId": "post1"
  "type": "postTag",
  "tagId": "tag1",
}

有其他选项可用于加快使用少量弯头润滑脂提取标签的速度

发布

{
  "id": "someId",
  "type": "postTag",
  "tagId": "tag1",
  "postId": "post1"
}

{
 "id": "post1",
 "name": "Post 1"
}

{
 "id": "post1",
 "name": "Post 1"
 "tagIds" : ["tag1", "tag4"]
}

假设一篇文章的标签不会超过20个。使这成为一个通常可以忽略不计的存储需求，以减少查找。我发现目前没有迫切的需要，因为数据库中有10000个关系

易于访问和更新

{
 "type": "tag",
 "id": "tag1",
 "name": "Tag One"
}

1:M是一个直接指向它想要的东西的对象。M:M是两个不同的实体，指向它们的关系。建立这种关系的模型，并集中逻辑

重播器

{
  "id": "someId",
  "extraAttribute": false,
  "postId": "post1"
  "type": "postTag",
  "tagId": "tag1",
}

如果应用程序呈现长数据列表（数百或数千） 我们建议使用一种称为“窗口化”的技术。这 该技术在任何给定时间只渲染一小部分行， 并且可以显著减少重新渲染图像所需的时间 组件以及创建的DOM节点数

我觉得解决方案可能是特定于用例的，并受到更广泛的意见的影响。我在使用带有Vuex的沙发/邮袋和一个包含20000个条目的非常大的表格时遇到了这个问题。同样，在生产中，这些问题并不是非常明显。结果总是不同的

我在这里尝试了几件事：

• 加载部分数据集：在文件中（非反应性）与在内存中（在Vuex中加载）
• 排序、分页、在文件中搜索并加载结果

---

根据您最后的评论。我将介绍我目前在这种情况下使用的数据结构：
标记

{
 "type": "tag",
 "id": "tag1",
 "name": "Tag One"
}

要发布的标签

{
  "id": "someId",
  "type": "postTag",
  "tagId": "tag1",
  "postId": "post1"
}

{
 "id": "post1",
 "name": "Post 1"
}

{
 "id": "post1",
 "name": "Post 1"
 "tagIds" : ["tag1", "tag4"]
}

发布

{
  "id": "someId",
  "type": "postTag",
  "tagId": "tag1",
  "postId": "post1"
}

{
 "id": "post1",
 "name": "Post 1"
}

{
 "id": "post1",
 "name": "Post 1"
 "tagIds" : ["tag1", "tag4"]
}

我发现存储关系ID的M:M的每一边都可能产生孤儿。在两个位置管理这些ID会导致复制步骤和认知管理的增加，因为管理M:M的所有功能都发生在两个位置而不是一个位置。此外，关系本身可能需要包含数据，这些数据会去哪里
M:M无实体

{
 "id": "post1",
 "name": "Post 1"
 "tagIds": [
   {id: "tag1", extraAttribute: false} //this is awkward
 ] 
}

标记到Post-其他属性

{
  "id": "someId",
  "extraAttribute": false,
  "postId": "post1"
  "type": "postTag",
  "tagId": "tag1",
}

有其他选项可用于加快使用少量弯头润滑脂提取标签的速度
发布

{
  "id": "someId",
  "type": "postTag",
  "tagId": "tag1",
  "postId": "post1"
}

{
 "id": "post1",
 "name": "Post 1"
}

{
 "id": "post1",
 "name": "Post 1"
 "tagIds" : ["tag1", "tag4"]
}

假设一篇文章的标签不会超过20个。使这成为一个通常可以忽略不计的存储需求，以减少查找。我发现目前没有迫切的需要，因为数据库中有10000个关系
易于访问和更新

{
 "type": "tag",
 "id": "tag1",
 "name": "Tag One"
}

1:M是一个直接指向它想要的东西的对象。M:M是两个不同的实体，指向它们的关系。建立这种关系的模型，并集中逻辑
重播器

{
  "id": "someId",
  "extraAttribute": false,
  "postId": "post1"
  "type": "postTag",
  "tagId": "tag1",
}

如果应用程序呈现长数据列表（数百或数千） 我们建议使用一种称为“窗口化”的技术。这 该技术在任何给定时间只渲染一小部分行， 并且可以显著减少重新渲染图像所需的时间 组件以及创建的DOM节点数
我觉得解决方案可能是特定于用例的，并受更广泛的opin约束