Индикатор загрузки в процентах для приложения React / Redux, такого как Pace.js, который отображается только при начальной загрузке страницы

Question

Я пытаюсь найти лучший способ сделать панель загрузки для моего сайта в React (create-реагировать-приложение) / Redux, которая показывает процент загрузки страницы.

Однако я хочу, чтобы это появлялось только один раз при начальной загрузке страницы, и при каждом последующем вызове ajax или переходе страницы не должно быть полосы загрузки. В настоящее время я использую Pace.js, и способ, которым я делаю это, заключается в том, чтобы просто включить скрипты / таблицы стилей Pace вне сборки. Затем я делаю встроенный скрипт в index.html

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

Однако проблема в том, что, поскольку этот код существует вне кода пакета React, я не могу использовать Redux и управление состоянием. Я хочу в основном иметь начальный ключ состояния initialPageLoad установлен вtrueв Redux и так в зависимости от того, на каком маршруте запускается пользователь, у меня будут разные переходы с панели загрузчика. После этого перехода я установлюinitialPageLoadв false, чтобы загрузчик не запускался при последующих переходах.

Одно из решений, которое я могу придумать, это импортировать Pace в React, и тогда у меня будет доступ к Redux. Тем не менее, я думаю, было бы сложно включить Pace в хуки жизненного цикла React; в репозитории Create React App у них даже есть примечание для Pace, в котором рекомендуется включить его в качестве отдельного CDN.

Я не мог найти какие-либо Pace-подобные библиотеки для React там; единственные загрузчики прогресса - это просто компоненты, которые нужно изменить самим, поэтому любые советы будут оценены.

Answer 1

Попытка интегрировать 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);
 });