Question

我已经完成了Dan Abramov关于EggHead的介绍系列，我正在开发一个真实世界的应用程序。这个领域很复杂，所以我会使用经典的＃34;博客＆＃34;示例

让我们说，我们有一个＆＃34;索引/列表＆＃34;页面，我们需要展示的是博客帖子的标题和模糊。所以我们有一个返回它的API端点，我们将它存储在blogs.byId下的状态树中。

然后，当您点击博客文章时，我们实际上需要更多信息 - 例如完整的博客文章，以及标签和类别。让我们使用元数据＆＃34;。

来调用这个博客

拉伸示例，可能会有另一个完全独立的页面，我想显示最近3条评论的博客帖子列表。让我们将这些博客评为＆＃34;。

我的问题是，我的州树应如何处理这些单独的例子，我存储相同的东西＆＃34;但是采用不同的格式＆＃34;？我最初的预感是将它们视为完全独立的数据类型，因此我的状态树将具有例如：blogs.byId，blogsWithMetadata.byId和blogsWithComments.byId。

然后，即使每个博客文章都缓存在blogs.byId部分，我们需要查看博客文章的那一刻，该应用程序完全忽略了这个温暖的blogs.byId缓存，并且只关注blogsWithMetadata.byId - 所以我们基本上构建了3个独立的博客数据缓存，每个缓存都有不同的信息量，并将它们视为彼此无关，就像＃34;博客＆＃34 ;和一个完全不相关的表，如＆＃34;小部件＆＃34;会的。

这是对的吗？或者有更好的方法吗？

该应用程序目前在同一节点下对它们进行了全部攻击，没有区分基于＆＃34;格式＆＃34;它引起了痛苦的世界。

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，然后创建选择器，将您想要的帖子作为道具传递给页面组件。

Redux状态树结构：＆＃34;具有不同格式/数量细节的相同类型的数据＆＃34;

1 个答案: