Question

例如，我有两个组件 - ListOfGroupsPage和GroupPage。

在ListOfGroupsPage中，我从服务器加载组列表并将其存储到state.groups

在路线中，我为GroupPage

设置了'group /：id'

加载此地址后，应用程序显示GroupPage，此处我从state.groups获取组的数据（尝试通过id查找状态组）。一切正常。

但如果我重新加载页面，我仍然在页面/组/ 2上，所以显示了GroupPage。但状态为空，因此应用程序无法找到该组。

在React + Redux中加载数据的正确方法是什么？我可以看到这种方式：

1）在根组件中加载所有数据。从交通方面来看，这将是非常大的开销

2）不要依赖商店，尝试在每个组件上加载所需的数据。这是更安全的方式。但我不认为为每个组件加载相同的数据 - 这是一个很酷的主意。然后我们不需要状态 - 因为每个组件都将从服务器

获取数据

3）???可能在每个组件中添加某种检查 - 首先尝试在商店中查找所需的数据。如果无法 - 从服务器加载。但是每个组件都需要很多逻辑。

那么，在使用Redux + ReactJS的情况下，是否有从服务器获取数据的最佳解决方案？

Answer 1

一种方法是使用redux-thunk检查redux存储中是否存在数据，如果不存在，则发送服务器请求以加载缺少的信息。

您的GroupPage组件看起来像

class GroupPage extends Component {
  componentWillMount() {
    const groupId = this.props.params.groupId
    this.props.loadGroupPage(groupId);
  }
  ...
}

在你的行动......

const loadGroupPage = (groupId) => (dispatch, getState) => {
  // check if data is in redux store
  // assuming your state.groups is object with ids as property
  const {
    groups: {
      [groupId]: groupPageData = false
    }
  } = getState();

  if (!groupPageData) {
    //fetch data from the server
    dispatch(...)
  }
}

Answer 2

我建议使用localstorage在客户端缓存信息。将Redux状态或其重要部分保留在状态更改的本地存储中，并在加载时检查localstorage中的现有记录。由于数据将在客户端上，因此检索起来非常简单快捷。

Answer 3

我接近这个的方法是在创建商店后直接从服务器获取。我通过调度动作来做到这一点。我还使用thunk在isFetching = true上设置*_REQUEST，并在*_SUCCESS或*_FAILURE后将其设置为false。这允许我显示用户的事情，如进度条或微调器。我认为你可能高估了“流量”问题，因为只要你以一种在商店的特定部分为空的情况下不会破坏的方式构建组件，它就会异步执行。

您所看到的“无法获取未定义组”的问题（您在评论中提到）可能是因为您有一个对象并且正在对其进行.groups。该对象很可能是空的，因为它尚未填充。这里有几点需要考虑：

在组件中使用三元运算符来检查someObject.groups是否为空;或
将someObject.groups的initialState细化为空数组。这样，如果您要.map，那就不会出错。
使用选择器检索组列表，如果someObject.groups为null，则返回空数组。

您可以在small test app中看到我如何执行此操作的示例。具体看看：

/src/index.js初次发送
/src/redux/modules/characters.js使用thunks
/src/redux/selectors/characters.js了解CharacterDetails组件中使用的漫画，系列等的人口

我应该在哪里从Redux + ReactJS中的服务器加载数据？

3 个答案: