React / Redux 内容丰富，检索数据的最佳实践

Question

我在使用 React / Redux 构建的个人网站中使用 Contentful 作为 CMS，但我对如何处理数据的异步获取有点困惑。

对于我的网站，我有一个Blog 视图，其中列出了我的BlogPosts，单击其中一个将带您进入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() }
}

如果用户从博客页面转到博客帖子页面，或者他们在博客帖子页面上刷新，我可以通过这种方式进行处理。

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

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

Answer 1

您肯定需要在BlogPost组件中对单个博客文章进行请求，否则不通过Blog视图就无法直接访问单个博客文章。

您仍然需要获取 Blogcomponent 中的所有博客文章才能显示列表。但是由于您不需要在列表中显示整个博客文章，您可以通过仅获取您需要的内容（例如文章的标题和 ID）来最小化请求的大小。 （不确定是否可以通过内容 API 实现）

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