满足于 React / Redux，检索数据的最佳实践

Question

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

对于我的网站，我有一个列出我BlogPost的Blog视图，单击一个视图会将您带到BlogPost视图。在这两个组件中，我想在获取/加载这些元素时对其进行动画处理。

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

1. 我当前的解决方案是在根App.jsx中，以从componentDidMount()上的 Contentful 获取所有帖子并填充 Redux 存储密钥posts.这将是对 Contentful 的唯一 API 请求。然后在BlogPost组件中，我将处理如下操作：

博客帖子.jsx

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

这样，我可以处理用户是否从博客页面转到博客文章页面，或者如果他们在博客文章页面上刷新。

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

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

Answer 1

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

您仍然需要获取Blog组件中的所有博客文章才能显示列表。但是，由于您不需要在列表中显示整个博客文章，因此您可以通过仅获取所需的内容(例如帖子的标题和ID)来最小化请求的大小。(不确定内容丰富的 api 是否可以做到这一点)

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