Utilisation d'une API

Utiliser une API en React ne demande pas de nouvelles notions par rapport à celles que vous connaissez déjà.

Utiliser une API c'est un mélange de :

L'utilisation de fetch
L'utilisation de useEffect
L'utilisation de useReducer

Utiliser fetch

fetch est la solution par excellence pour appeler une API. Elle est fournie directement par JavaScript, et ne nécessite pas de librairies externes.

Le cours sur fetch est disponible ici.

Un exemple d'utilisation de fetch où l'on appelle une API pour récupérer une série de tâches à effectuer (todos) :

fetch("https://dummyjson.com/todos")
    .then(
        (response) => {
            // transformer le JSON en JS
            response.json()
        }
    )
    .then(
        (data) => {
            // afficher les données reçues
            console.log(data)
        }
    )
    .catch(
        (error) => console.error(error)
    );

Comment implémenter ça en React ?

Les API peut être utilisée pour plein de choses :

récupérer des données
ajouter des données
modifier des données
...

Pour aujourd'hui nous allons nous concentrer sur la récupération de données.

Nous avions vu dans le cours sur useEffect qu'il servait à intéragir avec des services extérieurs aux composants : une API est un élément extérieur, nous allons donc charger nos données depuis useEffect.

Nous avons vu avec useReducer comment manipuler un state complexe avec les dispatch et actions, nous allons donc l'utiliser pour gérer notre state.

Exemple d'utilisation

Les données

Nous allons utiliser une API : https://dummyjson.com/quotes qui nous renvoie une trentaine de citations sous le format (en JSON) suivant :

{
"quotes" : [
  {
    "id": 1,
    "quote": "Your heart is the size of an ocean. Go find yourself in its hidden depths.",
    "author": "Rumi"
  },
  {
    "id": 2,
    "quote": "The Bay of Bengal is hit frequently by cyclones. The months of November and May, in particular, are dangerous in this regard.",
    "author": "Abdul Kalam"
  },
  {
    "id": 3,
    "quote": "Thinking is the capital, Enterprise is the way, Hard Work is the solution.",
    "author": "Abdul Kalam"
  }
]
}

Le reducer

const quotesReducer = (state, action) => {
    if(action.type === "INIT")
    {
        let newState = Object.assign({}, state, { loading: true });

        return newState;
    }
    else if(action.type === "LOADED")
    {
        let newState = Object.assign({}, state, { loading: false, quotes : action.payload });
        return newState;
    }
}

export default quotesReducer;

Le composant App

Ici pour sécuriser un peu le comportement, nous utilisons async et await qui nous permettent de garantir d'attendre la résolution d'une Promise avant de faire autre chose.

Nous n'avons pas eu le temps de faire le cours détaillé sur async / await donc pour le moment, vous pouvez simplement copier coller cette syntaxe en l'adaptant à votre URL et vos données, il n'y a donc que l'URL et les dispatch qui changent.

import {useReducer, useEffect} from 'react'
import quotesReducer from "./quotesReducer.js";

import './App.css'


function App() {
    const [state, dispatch] = useReducer(quotesReducer, {quotes: [], loading: false});

    useEffect(() => {

        const fetchQuotes = async () => {
            dispatch({ type: 'INIT' });

            const response = await fetch('https://dummyjson.com/quotes');
            const result = await response.json();
            dispatch({ type: "LOADED", payload: result.quotes });
        };

        fetchQuotes();

    }, []);



    if(state.loading)
    {
        return (
            <>
                <p>Chargement...</p>
            </>
        )
    }
    else
    {
        return(
            <>
                <ul>
                    {
                        state.quotes.map((quote, index) => <li style={{marginBottom: "1.5rem"}} key={index}>
                            {quote.quote} ({quote.author})
                        </li>)
                    }
                </ul>
            </>
        )
    }
}

export default App

05 February 2026