Komunikacja z API w React.js

1. React.js: Wprowadzenie do kursu od podstaw
2. Poznaj React.js
3. Pierwszy komponent w React.js
4. Props czyli atrybuty w React.js
5. Podział na komponenty w React.js
6. Klasy jako komponenty React.js
7. Interakcja z komponentami React.js
8. Stan komponentów React.js
9. State w React.js 2
10. Metody cyklu życia komponentu w React.js
11. React.js w przykładach: filtrowanie statycznej listy
12. Tworzenie aplikacji React.js dzięki create-react-app
13. React.js na GitHub Pages dzięki create-react-app
14. Testowanie aplikacji React.js — podstawy Enzyme
15. Testowanie React.js w Enzyme — props, state i interakcje
16. Poprawne bindowanie funkcji w React.js
17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
18. Komunikacja pomiędzy komponentami w React.js
19. Komunikacja z API w React.js
20. Formularze w React.js — kontrolowane komponenty
21. Formularze w React.js — niekontrolowane komponenty
22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
23. TDD w React.js z pomocą react-testing-library
24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
25. React + Redux — kurs: wprowadzenie i podstawy
26. React + Redux — filtrowanie listy, proste selektory
27. Projektowanie komponentów: Presentational & Container Components
28. Asynchroniczność w Redux: redux-thunk
29. Kiedy używać state, a kiedy Redux?
30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
31. Leniwe ładowanie komponentów w React dzięki import
32. Higher Order Reducers — Redux i powtarzanie kodu
33. React Hooks — wprowadzenie i motywacja
34. React Hooks: useState, czyli stan w komponentach funkcyjnych
35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
36. React Hooks: useEffect — efekty uboczne w komponencie
37. React Hooks a żądania do API
38. useReducer — przenoszenie logiki poza komponent
39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
40. Wady React Hooks
41. React Hooks: Piszemy własne hooki!

Bardzo często powracającym wątkiem jest pytanie o to, w jaki sposób zaimplementować komunikację z API w React.js. Moja odpowiedź może Cię nieco zaskoczyć: React nie ma nic do tego. Możesz to robić absolutnie dowolnie.

Plan

Rozpatrzę teraz popularny przypadek: W momencie załadowania aplikacji, potrzebuję pobrać jakieś dane z API. Gdy już będą gotowe — chcę je wyświetlić. Brzmi dobrze? Rozbuduję więc swój poprzedni przykład: Znaną i lubianą listę kontaktów 😉

Wracam do kodu stąd:

Podział na komponenty w React.js

Gotowa implementacja z tej części kursu dostępna jest tutaj: github.com/mmiszy/typeofweb-kurs-react/tree/contacts-list-1

Przygotowanie

Nieco zmieniam tamten przykład. Przede wszystkim to komponent App będzie „dostarczycielem” danych do ContactsList. Przekaże tablicę jako props:

export const App = () => {
  return (
    <div>
      <AppHeader />
      <main className="ui main text container">
        <ContactsList contacts={[]} />
      </main>
    </div>
  );
}

Tę tablicę za moment wypełnię danymi z API. Przykładowy obiekt z API wygląda tak:

{
  "gender": "female",
  "name": { "title": "mrs", "first": "célia", "last": "lopez" },
  "location": {
    "street": "3403 rue paul-duvivier",
    "city": "dunkerque",
    "state": "var",
    "postcode": 52018
  },
  "email": "célia.lopez@example.com",
  "login": {
    "username": "purplelion429",
    "password": "spoiled",
    "salt": "nUY17qZz",
    "md5": "2660f36114ad97ebbb38729d1e1ad935",
    "sha1": "14e893bf4d76c2e6bc942846d557acc3c1fa3223",
    "sha256": "d032a528a2da82f5b9ef37d3c3277c9255fef5de73db1e979402c2ee86fe4cf2"
  },
  "dob": "1956-01-28 09:02:34",
  "registered": "2011-05-16 19:04:38",
  "phone": "04-98-07-66-00",
  "cell": "06-33-63-47-98",
  "id": { "name": "INSEE", "value": "256045054319 82" },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/80.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/80.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/80.jpg"
  },
  "nat": "FR"
}

Ja chciałbym z tego wyciągnąć:

• pełne imię i nazwisko
• numer telefonu
• link do avatara
• coś unikalnego co posłuży za atrybut key (wymagany przy tablicach elementów)

Wymaga to tylko wyjęcia i połączenia niektórych pól:

const avatarUrl = contact.picture.thumbnail;
const { title, first, last } = contact.name;
const name = `${title} ${first} ${last}`.trim();
const phone = contact.phone;
const key = contact.login.username;

Ostatecznie cały komponent:

export class ContactsList extends React.Component {
  contactToContactItem = contact => {
    const avatarUrl = contact.picture.thumbnail;
    const { title, first, last } = contact.name;
    const name = `${title} ${first} ${last}`.trim();
    const phone = contact.phone;
    return <ContactItem key={key} avatarUrl={avatarUrl} name={name} phone={phone} />;
  };

  render() {
    return (
      <ul className="ui relaxed divided list selection">
        {this.props.contacts.map(this.contactToContactItem)}
      </ul>
    );
  }
}

Nic nadzwyczajnego, to wszystko już na pewno widziałaś/eś w poprzednich odcinkach kursu. Idźmy dalej… został tylko jeden komponent, który wyświetla podane informacje:

export const ContactItem = ({ avatarUrl, name, phone }) => {
  return (
    <li className="item">
      <img src={avatarUrl} className="ui mini rounded image" alt="" />
      <div className="content">
        <h4 className="header">{name}</h4>
        <div className="description">{phone}</div>
      </div>
    </li>
  );
};

Uff! To tyle jeśli chodzi o przygotowania.

Pobieranie danych z REST API w React.js

Do sedna! Chcę pobierać listę kontaktów z API randomuser.me. Potrzebne mi będzie jedno żądanie GET. Najprościej zrobić je przy pomocy fetch wbudowanego w przeglądarkę 🙂

Jak wspomniałem wcześniej, dobrym miejscem na wykonanie pytania do API jest funkcja componentDidMount(…). Tam też umieszczę swój kod. Wykonam żądanie, poczekam na odpowiedź, a wynik zapiszę w state. Następnie przekażę to do komponentu ContactsList:

export class App extends React.Component {
  state = {
    contacts: []
  };

  componentDidMount() {
    fetch("https://randomuser.me/api/?format=json&results=10")
      .then(res => res.json())
      .then(json => this.setState({ contacts: json.results }));
  }

  render() {
    return (
      <div>
        <AppHeader />
        <main className="ui main text container">
          <ContactsList contacts={this.state.contacts} />
        </main>
      </div>
    );
  }
}

Działa!

Spinner na czas ładowania…

No tak, działa, ale jednak efekt nie jest idealny. Początkowo renderuje się zupełnie pusta lista, a dopiero po chwili pojawiają się dane. Zmienię to. Chcę, aby na początku wyświetlał się napis Ładowanie…:

{contacts ? <ContactsList contacts={contacts} /> : 'Ładowanie…'}

Korzystam z faktu, że wyrażenia wewnątrz { i } w JSX są wykonywane niemal jak zwykły JavaScript — i mogę tutaj użyć operatora trójoperandowego. W prawdziwej aplikacji zamiast napisu Ładowanie… prawdopodobnie chciałbym dodać jakiś spinner, który zamknąłbym np. w LoadingComponent 🙂

Możemy Cię nauczyć tego wszystkiego szybciej: Naucz się React na szkoleniu Type of Web!

Podsumowanie

Poznałaś/eś właśnie podstawowy sposób pobierania i wyświetlania danych z REST API w React.js. To nie było takie trudne, prawda? Cały kod: github.com/mmiszy/typeofweb-kurs-react/tree/contacts-list-1

Jeśli chcesz na bieżąco dowiadywać się o kolejnych częściach kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.

Ćwiczenie

Ćwiczenie: Dodaj do aplikacji guzik „odśwież”, który spowoduje ponowne pobranie i wyrenderowanie listy kontaktów (dane z randomuser.me są losowe, więc za każdym razem będą inne).