当应用程序从非索引页面启动时准备 redux store

Question

简单 SPA，项目列表，它将在 componentDidMount 时从 API 加载。并将结果存储在 redux store

当用户点击列表项时，它会进入项目详情页面，并显示来自redux store的详情，传统的从container component到stateless component的模式。

一切正常，但有一个问题，当用户直接从详细信息页面打开 Web 应用时 /item/:itemId:

1. 服务器将return index.html
2. React router 然后将控制并将用户路由到详细信息页面，因为 url 匹配。

问题是，这次 store 完全是空的，因为没有初始化步骤。

什么是正确的解决方案？

我想我可以简单地检查componentDidMount中的props，如果想要的prop是undefined，我会调用API做一个初始化。

或者有什么方法可以让我在容器组件中执行此步骤，因为它会知道 redux store 在 stateless component.

之前还没有准备好

或者考虑 list to detail 是网络世界中的一种模式，是否有处理此问题的最佳实践？

Answer 1

我曾经有过一个类似的应用程序。我没有在应用程序中获取状态，而是在 React 应用程序初始化的同时进行了获取过程 + redux 填充。

因此您将拥有一个主要的 Javascript 文件，它将开始抓取，完成后将填充 redux 存储。这将是异步的。因此，您可以同时启动 React 应用程序：

fetchData().then(fillReduxStore()); ReactDom.render()

所以 React 应用程序将完成所有路由和它应该做的事情，一旦数据在那里，应用程序就会被填充。