Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/399.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Redux状态树结构:“;具有不同格式/详细程度的同一类型数据”;_Javascript_Redux - Fatal编程技术网

Javascript Redux状态树结构:“;具有不同格式/详细程度的同一类型数据”;

Javascript Redux状态树结构:“;具有不同格式/详细程度的同一类型数据”;,javascript,redux,Javascript,Redux,我已经在EggHead上完成了丹·阿布拉莫夫的简介系列,正在开发一个真实世界的应用程序。这个域很复杂,所以我将使用一个经典的“blogs”示例来运行它 比如说,我们有一个“索引/列表”页面,我们需要显示的只是博客文章的标题和简介。因此,我们有一个API端点来返回它,并将其存储在状态树中的blogs.byId下 然后,当你点击一篇博客文章时,我们实际上需要更多的信息——例如完整的博客文章,以及标签和类别。让我们称之为“具有元数据的博客” 扩展这个例子,可能会有另一个完全独立的页面,我想在其中显示包

我已经在EggHead上完成了丹·阿布拉莫夫的简介系列,正在开发一个真实世界的应用程序。这个域很复杂,所以我将使用一个经典的“blogs”示例来运行它

比如说,我们有一个“索引/列表”页面,我们需要显示的只是博客文章的标题和简介。因此,我们有一个API端点来返回它,并将其存储在状态树中的
blogs.byId

然后,当你点击一篇博客文章时,我们实际上需要更多的信息——例如完整的博客文章,以及标签和类别。让我们称之为“具有元数据的博客”

扩展这个例子,可能会有另一个完全独立的页面,我想在其中显示包含最近3条评论的博客文章列表。让我们称之为“有评论的博客”

我的问题是,我的状态树应该如何处理这些单独的示例,在这些示例中,我存储的是相同的“东西”,但“格式”不同?我最初的预感是将它们视为完全独立的数据类型,因此我的状态树将具有例如:
blogs.byId
blogsWithMetadata.byId
blogsWithComments.byId

然后,即使每个博客帖子都缓存在blogs.byId
部分,在我们需要查看博客帖子的那一刻,应用程序也会完全忽略blogs.byId
缓存,而只查看blogsWithMetadata.byId
——因此我们基本上要建立3个单独的博客数据缓存,每个人都拥有不同数量的信息,并将其视为与“博客”和“小部件”等完全不相关的表格一样互不相关

这是正确的吗?还是有更好的办法


该应用程序目前将它们都放在同一个节点下,没有基于“格式”的区别,这会造成一个痛苦的世界。

可能有很多方法可以选择这样做。其中之一是用来构造数据结构

您的博客文章可能具有API返回的数据结构,如下所示:

{
  "id": "123",
  "author": {
    "id": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": [{
    "id": "324",
    "commenter": {
      "id": "2",
      "name": "Nicole"
    }
  }],
  "tags": [{
    "id": "1",
    "value": "awesome"
  }, {
    "id": "2",
    "value": "journal"
  }],
  "categories": [{
    "id": "1",
    "value": "personal"
  }, {
    "id": "2",
    "value": "life"
  }]
}
{
  entities: {
    "post": { 
      "123": { 
        id: "123",
        author: "1",
        title: "My awesome blog post",
        comments: ["324"],
        tags: ["1", "2"],
        categories: ["1", "2"],
      }
    },
    "users": {
      "1": { "id": "1", "name": "Paul" },
      "2": { "id": "2", "name": "Nicole" }
    },
    "comments": {
      "324": { id: "324", "commenter": "2" }
    }
    "tags": {
      "1": { id: "1", "value": "awesome" },
      "2": { id: "2", "value": "journal" },
    }
    "categories": {
      "1": { id: "1", "value": "personal" },
      "2": { id: "2", "value": "life" },
    }
  }
}
正常化后,其外观如下所示:

{
  "id": "123",
  "author": {
    "id": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": [{
    "id": "324",
    "commenter": {
      "id": "2",
      "name": "Nicole"
    }
  }],
  "tags": [{
    "id": "1",
    "value": "awesome"
  }, {
    "id": "2",
    "value": "journal"
  }],
  "categories": [{
    "id": "1",
    "value": "personal"
  }, {
    "id": "2",
    "value": "life"
  }]
}
{
  entities: {
    "post": { 
      "123": { 
        id: "123",
        author: "1",
        title: "My awesome blog post",
        comments: ["324"],
        tags: ["1", "2"],
        categories: ["1", "2"],
      }
    },
    "users": {
      "1": { "id": "1", "name": "Paul" },
      "2": { "id": "2", "name": "Nicole" }
    },
    "comments": {
      "324": { id: "324", "commenter": "2" }
    }
    "tags": {
      "1": { id: "1", "value": "awesome" },
      "2": { id: "2", "value": "journal" },
    }
    "categories": {
      "1": { id: "1", "value": "personal" },
      "2": { id: "2", "value": "life" },
    }
  }
}
随后,如果需要,您可以为每个页面设置一个状态:

{
  entities: {...},
  ui: {
    blogs: {
      posts: [1, 2],
      hasComments: false,
      // Displaying the blogs with or without comments
      // could simply just be a boolean flag in state.
    },
  }
}

使用,然后创建选择器,将所需的帖子作为道具传递给页面组件。

您是否考虑过使用
normalizer
来构建数据结构?