对React / Redux感到满意，这是检索数据的最佳实践

Question

我在使用React / Redux构建的个人网站上使用Contentful作为CMS，我对如何处理异步数据提取感到困惑。

对于我的网站，我有一个Blog视图，其中列出了我的BlogPost，点击其中一个会转到BlogPost视图。在这两个组件中，我想在获取/加载这些元素时为它们设置动画。

我脑子里有两个解决方案来处理抓取和动画：

1. 我当前的解决方案位于根App.jsx，以便从componentDidMount()上的Contentful获取所有帖子，并填充Redux商店密钥posts。这将是Contentful的唯一API请求。然后在BlogPost组件中我会处理这样的事情：

BlogPost.jsx

componentDidMount() {
    if (this.props.posts.length > 0) { this.animateIn() } 
    else { show loading spinner }
}

componentDidUpdate(nextProps) {
    if (nextProps.posts.length > 0) { this.animateIn() }
}

这样我可以处理用户从博客页面进入BlogPost页面，或者他们是否在BlogPost页面上刷新。

1. 第二个解决方案是我在几个在线示例中看到的解决方案，例如this one。该示例不是一个API请求，而是发出多个请求。所以在我的BlogPost组件中，在mount上我会请求获取特定帖子然后填充。这样，我不会在componentDidUpdate和componentDidMount中重复代码，但它会添加更多API调用。

我倾向于坚持使用我当前的解决方案，但我想知道是否有任何有经验的Contentful（或任何CMS用户）对这种情况的最佳实践有任何意见。

Answer 1

您肯定需要对BlogPost组件中的各个博客帖子发出请求，否则无法通过Blog视图直接访问各个博客帖子。

您仍然需要获取Blog组件中的所有博客帖子才能显示该列表。但是，由于您不需要在列表中显示整个博客帖子，您可以通过仅获取所需内容（例如帖子的标题和ID）来最小化请求的大小。 （不确定这是否可以与内容丰富的api一起使用）

此外，我建议将数据提取移动到容器组件中，这样可以获得更清晰/更好的结构化代码。 This article很好地解释了容器组件的概念。