javascript - 仅在初始页面加载时显示的 React/Redux 应用程序(如 Pace.js)的百分比加载栏

Question

我正在尝试找到在 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 的生命周期钩子(Hook)中会很棘手；在 Create React App 存储库中，他们甚至有一个关于 Pace 的旁注 here ，建议将其作为单独的 CDN 包含。

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

Answer 1

尝试将 Pace 集成到您的 Redux 状态管理中是不切实际的，因为尝试让应用报告它是否已加载其 Assets 是一个独立于应用的实例的问题。 p>

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

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

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

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

 const isInitialPageLoaded = 'isInitialPageLoaded'
 Pace.once('restart', () => { if (sessionStorage.getItem(isInitialPageLoaded)) {
  // Trigger Pace to display page load progress
  sessionStorage.setItem(isInitialPageLoaded, true);
 });