javascript - Redux状态树结构: "same type of data with different format/amounts of detail"

Question

我已经完成了 Dan Abramov 在 EggHead 上的介绍系列，并且正在开发一个现实世界的应用程序。该域很复杂，因此我将使用经典的“博客”示例来运行。

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

然后，当您点击博客文章时，我们实际上需要更多信息 - 例如完整的博客文章，以及标签和类别。我们称之为“带有元数据的博客”。

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

我的问题是，我的状态树应该如何处理这些单独的示例，其中我以不同的“格式”存储相同的“事物”？我最初的预感是将它们视为完全独立的数据类型，因此我的状态树将具有例如: blogs.byId、blogsWithMetadata.byId 和 blogsWithComments.byId 。

然后，即使每一篇博客文章都缓存在 blogs.byId 部分中，当我们需要查看博客文章时，应用程序就会完全忽略那个温暖的 blogs.byId 缓存，并且只查看 blogsWithMetadata.byId - 因此我们本质上是构建 3 个独立的博客数据缓存，每个缓存都有不同数量的信息，并将其视为就像“博客”一样彼此不相关，而像“小部件”这样的完全不相关的表也是如此。

这是正确的吗？或者有更好的办法吗？

该应用程序目前将它们全部放在同一个节点下，没有基于“格式”的区别，这导致了一个痛苦的世界。

Answer 1

您可能可以选择多种方法来执行此操作。其中之一是使用normalizr构建您的数据。

您的博客文章可能具有由 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" },
    }
  }
}

随后，如果需要，您可以为每个页面设置一个状态:

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

使用 reselect ，然后创建选择器以将所需的帖子作为 Prop 传递给页面组件。