Love frontend

Якщо взяти одну річ, яку згадують на багатьох форумах по React або фронтендів вобщем, то це буде питання: як зробити AJAX запит в додатках на React.

Найбільше замішання - це те, що насправді React часто підноситься як фреймворк, і люди працювали з фреймворкамі, такими як Angular звикли працювати з викликами API, з такими речами як $ http і схожими helpers бібліотеками, пропонованими самим Angular. У випадку з React інша справа, так як React - це "просто" view бібліотека з керуванням стану і lifecycle методами.

Так як же зробити AJAX запит, якщо бібілотека не надає вам цього з коробки?

Ви в праві вільно використовувати 3rd party бібліотеки (інші невеликі бібіліотека, вирішальні певні завдання). Ви можете використовувати нативну реалізацію браузера fetch (також ви можливо захочете включити whatwg-fetch polyfill. Для підтримки fetch в старих браузерах) або використовувати axios. Я особисто віддаю перевагу останнім, так як axios має простий API і працює в більшості браузерах.

Все що вам потрібно, щоб працювати з axios, це знати як працюють promisses - навіть якщо ви коли-небудь використовували JQuery.ajax, то ви вже повинні розуміти що і як.

Давайте пояснимо основи використання на простому GET запиті:

Ми отправялем GET запит на певний URI і логіруем відповідь. Axios вже має на увазі, що відповідь буде в форматі JSON об'єкта, тому нам не потрібно вказувати будь-яких додаткових опцій.

Як ви можете бачити, створення AJAX запиту в React не сильно відрізняється від його створення в JQuery або Angular. Реальний питання - це.

Коли або де робити AJAX запит?

Коли ви розробляєте свій додаток і workflow, ви повинні заздалегідь продумати як буде влаштований прийом / передача даних (data flow) у програмі:

Які з компонентів будуть мати можливість відправляти запит на отримання даних?
Як дані будуть передаватися іншим компонентам?
Чи буде реалізовано більше ніж одну дію, яке може бути корисно в інших випадках (завантаження додаткової інформації про піст в цю сторінку, завантаження інформації в Гланом сторінку, показ схожих постів)?

Тут наведено пара хороших способів "best practice" для вирішення даного завдання, де використовувати AJAX запит:

componentWillMount

Ваш компонент, як в нашому прикладі буде приймати props, що містять ID статті і робити запит на завантаження даних. Ваше приложени може виглядати приблизно таким:

У разі отримання відповіді (response), щоб передати ID як props, наш компонент буде посилати AJAX запит і потім, в методі компонента render () буде перевірятися, якщо data (дані) уставнолени в state, то буде рендери контент.

Здається що це ідеальне чинне рішення, але також це вважається анти-патерном, так як у нас зараз є піднесений до контейнера компонент, який пов'язаний з відображенням елемента в його реалізації, це зменшуються можливість повторного використання даного компонента.

Прімічаніе перекладача: В даному випадку мається на увазі, що якщо ми наприклад, будемо використовувати компонент BlogPost в іншому місці, нам також потрібно буде передати id статті і кожен компонент буде кожен раз робити AJAX запит на отримання одних даних, актуальних для нього.

Передача даних від батьківського компонента через props

Замість того, щоб робити батьківським компонентом, компонент ми будемо передавати всі дані на пряму як props і ми зробимо наш батьківський компонент, які приймають дані. Це головним чином реалізовано у вигляді зміни URL при діях користувача в react-router.

Коли я використовую поняття батьківський компонент, ви все ще повинні пам'ятати зауваження з попереднього способу AJAX запиту про прив'язку компонента до його реалізації. Ви повинні по можливості уникати використання безлічі контейнерів / розумних компонентів у вашому додатку.

Використання state manager'а такого, як flux, redux або mobx.

На додаток до цього рішення, буде бонусом той факт, що зараз ми зможемо робити AJAX запит з будь-якого місця в додатку, яке нам сподобається (при зміні URL, в методі componentWillMount, при подію на сервері через сокети) і коли ми отримаємо наші дані і передамо їх в store, наші компоненти відповідно теж оновляться.

Додаток 2 - робимо це красиво

Тепер, коли ми знаємо як отримати дані через API, ми повинні переконатися, що користувач знає, що щось сталося. Для цього трохи підкоригуємо render () метод:

Завдяки перевірки чи є дані, ми можемо вирішити чи показувати контент користувачеві або відобразити що контент ще завантажується. Приклад реалізації даного рішення: