Zapytania do API (redux-thunk)

Aplikacje webowe bardzo często mają potrzebę pobrać lub zapisać coś na serwerze. Zwykle dzieje się to użyciem protokołu HTTP poprzez wywoływanie konkretnych endpointów przez klienta (zapytanie HTTP). Z tej lekcji dowiesz się w jaki sposób wykonywać zapytania asynchroniczne do zewnętrznego serwera API.

Zanim przystąpisz do kodowania potrzebować będziesz serwer, który możesz odpytać po jakieś dane. Na końcu tego artykułu znajdziesz link do przykładowego serwera NodeJS, który łatwo można uruchomić lokalnie.

Na potrzeby tego tutoriala skorzystamy z biblioteki redux-thunk, która pozwala wykonać nam takie zapytania i zmienić odpowiednio stan aplikacji.

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { getAllMovies } from "../duck/operations.js";

const MoviesContainer = ({ movies, getAllMovies }) => {
  useEffect(() => {
    getAllMovies();
  }, []);

  return (
    <ul>
      {movies.list.map(movie => (
        <li>{movie}</li>
      ))}
    </ul>
  );
};

const mapStateToProps = state => ({
  movies: state.movies
});

const mapDispatchToProps = dispatch => ({
  getAllMovies: () => dispatch(getAllMovies())
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MoviesContainer);

Kod z tego odcinka: Github

Przykładowe API do uruchomienia lokalnie: Github

Zadanie domowe: Wykonaj zapytanie do API aby dodać nowy film (formularz).