Question

在我的一个容器（组件+ Redux访问）中，我尝试执行以下操作：

function mapStateToProps (state) {    
  return {
    url: state.projects.byId[state.selection.projectId].url
  };
}

我在化简器中的初始状态是一个空对象{}。当我的组件启动并运行时，它会从API请求一些数据以填充状态。但是，由于最初我的初始状态为空，所以我会得到一个错误，即未定义url。足够公平。

我想出的一个解决方案（以及我通常会做的）是创建一个初始状态，该状态具有一些虚拟数据，类似于我最终将从API中获得的数据。

但是，这是我正在从事的第一个较大的项目，并且我的状态变得非常嵌套且非常深入，所以我想知道是否还有更好的选择？我也不确定我提出的解决方案是否是最佳实践。

Answer 1

一个好的经验法则是设计状态空间和UI，以便空数组[]和空对象{}作为UI具有有意义的“表示形式”。例如，空白列表可能会触发搜索结果页面以显示No results。

交易的第二个技巧是以延迟加载的方式指示加载状态。例如，您可以部分渲染UI而不显示实际数据，并在仍缺少数据的地方显示占位符元素。技术很多：研究您喜欢的网站，看看它们如何解决此问题。

最后，问问自己这个。 URL是否向用户显示？请记住，UI应该是JSX + props + state。如果使用url请求更多数据，则它不属于UI，而是不纯代码存在于React / Redux架构中的中间件。