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

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

对于我的站点，我有一个

Blog

视图，其中列出了我的

BlogPost

s，单击其中一个将带您进入

BlogPost

视图。在这两个组件中，我希望在获取/加载这些元素时为它们设置动画

我有两个解决方案来处理抓取和动画制作：

我当前的解决方案是在根

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() }
}

通过这种方式，我可以处理用户是否从Blog页面转到BlogPost页面，或者他们是否在BlogPost页面上刷新

第二个解决方案是我在几个在线示例中看到的，比如。该示例生成多个请求，而不是一个API请求。因此，在我的

BlogPost

组件中，在挂载时，我会请求获取特定的帖子，然后进行填充。这样，我就不会在

componentdiddupdate

和

componentDidMount

中重复代码，而是添加了更多的API调用

---

我倾向于坚持我目前的解决方案，但我想知道是否有经验丰富的知足者（或真正的任何CMS用户）对这种情况下的最佳实践有任何意见

您肯定需要在

BlogPost

组件中请求各个博客帖子，否则不通过

blog

视图就无法直接访问各个博客帖子

您仍然需要在

blog

组件中获取所有博客文章以显示列表。但是，由于您不需要在列表中显示整个博客文章，您可以通过只获取您需要的内容（如文章的标题和id）来最小化请求的大小。（但不确定这是否适用于contentful api）

---

此外，我还建议将数据获取移动到容器组件中，这有助于生成更干净/更好的结构化代码。很好地解释了容器组件的概念。

Hm我可以直接访问各个博客文章，因为包装器App.jsx使所有postsah的GET请求都可以。但在这种情况下，你需要的数据比你实际需要的要多得多，如果你最终有很多帖子，那就不能很好地扩展。所以我还是选择第二种解决方案。