Как загружать данные до рендеринга React?

170

30 ноября 2020, 06:00

Начинаю осваиваться с React и уже несколько недель безуспешно пытаюсь найти способ подгружать данные до перехода к компоненту. Что я подразумеваю: Клиент перешёл с одной страницы приложения на другую -> данные получаются в фоне (всё это время клиент видит старый роут, с которого происходил переход) -> осуществляется рендер компонента с уже загруженными данными. На просторах сети я находил react-async-component, но, насколько я понял, это не то. Также много читал про серверный рендеринг, но это также не то, что нужно. Учусь работать со связкой React + Redux + React Router V4.

Можете подсказать как реализовать то, что я описал выше? В идеале, если имеются, ссылки на документации (можно даже англоязычные, не принципиально). Я понимаю, что просить готовое решение - плохая практика и неуместна здесь, но я не вижу других вариантов решения своей проблемы. :(

Answer 1

Я бы предложил такой вариант:

Если вы пользуетесь HashRouter, то в history (устанавливается вместе с react-router-dom) есть функция createHashHistory, создаете файл (например hashHistory.js):

import { createHashHistory } from "history";
export const history = createHashHistory();

при нажатии на кнопку (ссылку) на другую страницу, вы вызываете экшн, внутри экшена у вас асинхронная функция для получения данных, тогда вы в блоке then можете сделать переход на другую страницу:

import {history} from 'путь к файлу hashHistory.js'
// функция (экшн) для получения данных
const fetchData = () => {
     fetch(......)
          .then(response => {
                // тут у вас уже получены данные
                history.push(ваша страница на которую нужен переход)
          })
}