Есть ли какой-нибудь способ загружать приложение сразу с некими исходными данными полученными с сервера, а не подгружать их AJAX-ом в самом приложении? Как вообще обычно это делается?
-
аяксом , а так в пропсах прописывай дефолтные, или в стор initData– Сергей ПетрашкоCommented 2 сент. 2019 в 12:58
-
Я initData прописать могу на этапе написания приложения. А получить динамически сразу при загрузке приложения с сервера можно или только AJAX-ом уже в загруженном приложении?– ArturCommented 2 сент. 2019 в 13:01
-
да , только аяксом. можно извратится, написать например на сервере вставку в html скрипта с изначальными данными и глобальной области видимости, но это костыль.. проще аяксом запросить– Сергей ПетрашкоCommented 2 сент. 2019 в 13:03
1 ответ
Вопрос выглядит неоднозначно. Вы хотите загружать приложение с данными, полученными с сервера, но не хотите подгружать данные в самом приложении. Коротким комментарием не получится дать ответ, поэтому напишу развернутый ответ.
Обычно это делается следующим образом (предположим, что у Вас уже устанолен React и приложение готово к запуску).
Создадим React-элемент, который будет простым компонентом без передаваемых в него
props
, но с начальным дефолтным состояниемstate
, описанным в конструкторе (сразу прибайндим наш метод получения данныхloadData
).constructor(props) { super(props); this.state = { isLoading: true, error: null, data: [], }; this.loadData = this.loadData.bind(this); }
Наш компонент будет возвращать HTML в качестве результата. Опишем несколько результатов, предусматривающих наличие и отсутсвие необходимых данных, которые необходимо получить с сервера (в методе
render
будут простые проверки) - это так называемый условный рендерингrender() { const { isLoading, data, error } = this.state; // Данные еще не были получены if (isLoading) { return <p>Loading data...</p>; } // Данные не получены, что-то пошло не так, ошибка if (error) { return <p>Error: {error}</p>; } // Данные успешно загружены и есть хотя бы одна запись if (data.length) { return <p>{data.length} data rows was loaded...</p>; } // Данные успешно загружены, но записей нет return <p>Data was loaded. No data to display...</p>; }
Всё достаточно просто. Примитивные проверки. Примитивная логика. Примитивный результат.
Метод
componentDidMount()
запускается после того, как компонент отрендерился в DOM - здесь мы и будем загружать данные. Никто не мешает сделать это в конструкторе, ведь конструктор компонента React вызывается до того, как компонент будет примонтирован. Однако мы определили состояние, а значит загрузку данных будем делать в методеcomponentDidMount()
- это хорошее место для создания сетевых запросов.componentDidMount() { // вызов метода загрузки данных `loadData` // хотя можно написать код из `loadData` прямо внутри `componentDidMount` this.loadData(); }
Раз уж мы разделили метод загрузки данных и метод
componentDidMount
, то напишем примитивный пример кода метода загрузки данных (URL получения данных выдуманный):loadData() { fetch('https://api.example.com') .then(response => { if (response.ok) { return response.json(); } else { throw new Error('Something went wrong...'); } }) .then(data => this.setState({ data, isLoading: false })) .catch(error => this.setState({ error, isLoading: false })); }
Тут тоже всё просто, можно использовать
axios.get
для получения данных, можно черезfetch
- всё на Ваше усмотрение. Нужно обязательно проставить переменнойisLoading
значениеfalse
, чтобы сказать нашему приложению, что загрузка завершена. Это простой пример того, как обычно делается загрузка данных в React-приложении.
С Redux схема такая же, просто дергаете action
загрузки данных, на который навешен reducer
, затем через mapStateToProps
достаете из стейта Redux-store необходимые данные и кладете в стейт Вашего компонента.