使用react redux避免不必要的api调用

Question

说我们有2页，主页面是书籍列表，第二页是书籍详细信息。当用户从书籍细节导航回来时，为什么我们应该再次调用api？我们可以重复使用相同的书状态。

我必须在第1页查看哪些条件以避免额外通话？

componentWillMount() {
    this.props.fetchBooks(getUserId())
}

Answer 1

在componentWillMount功能中，您可以在进行API调用之前检查books道具的状态。

如果books道具是null（即仅第一次），下面的代码只会进行API调用

componentWillMount() {
  if (this.props.books === null) { 
    this.props.fetchBooks(getUserId()) 
  }
}

缺点是如果在用户在书籍详细信息页面上添加新书时，当他们导航回来时，新书将不会被加载。根据您的使用情况，您可能需要进一步的逻辑来处理这个问题。