3

我正在尝试找到在 React (create-react-app) / Redux 中为我的网站创建加载栏的最佳方式，以显示页面加载的百分比。

但是，我只希望它在初始页面加载期间出现一次，并且每次后续的 ajax 调用或页面转换都不应该有加载栏。我目前正在使用Pace.js，我这样做的方式就是在构建之外包含 Pace 脚本/样式表。然后我在 index.html 中做一个内联脚本

Pace.once('done', () => remove specific pace stylesheet

但是，问题在于，由于此代码存在于 React 捆绑代码之外，因此我无法使用 Redux 和状态管理。我想基本上在 Redux 中initialPageLoad设置一个初始状态键true，因此根据用户从哪个路由开始，我将从加载器栏进行不同的转换。在此转换之后，我将设置initialPageLoad为 false，以便加载程序不会在后续导航中运行。

我能想到的一种解决方案是将 Pace 导入 React，然后我就可以访问 Redux。但是，我认为将 Pace 包含在 React 的生命周期钩子中会很棘手。在 Create React App 存储库中，他们甚至在此处为 Pace 提供了一个附注，建议将其作为单独的 CDN 包含在内。

我在那里找不到任何类似 Pace 的 React 库。唯一的进度加载器只是您需要自行修改的组件，因此我们将不胜感激。

4

1 回答 1

0

尝试将 Pace 集成到您的 Redux 状态管理中是不切实际的，因为尝试让应用程序报告它是否已加载其资产是一个与应用程序实例分开的问题。

您可以采用的一种方法是将应用程序初始页面加载标志存储在HTML5 会话存储中。

然后，当您的页面第一次加载时，您可以将会话变量更新为 true，例如

Pace.once('done', () => { sessionStorage.setItem('isInitialPageLoaded', true); })

在随后的页面加载中，您可以检查此变量以查看此页面之前是否已加载其资产：

 const isInitialPageLoaded = 'isInitialPageLoaded'
 Pace.once('restart', () => { if (sessionStorage.getItem(isInitialPageLoaded)) {
  // Trigger Pace to display page load progress
  sessionStorage.setItem(isInitialPageLoaded, true);
 });
于 2018-02-12T23:43:10.143 回答