Sommaire

Un exemple plus complet

Nous allons réaliser une petite application permettant d’interroger une API de recherche d’adresse proposée par l’administration française : adresse.data.gouv.fr. Celle-ci permet à partir d’une requête (un texte libre) de récupérer une liste de résultats correspondant à des adresses réelles, avec des informations comme leur géolocalisation exacte.

Les cas d’utilisations possibles sont nombreux : autocomplétion sur un champ de saisie d’adresse, recherche d’adresse sur une carte, etc. L’avantage pour notre exemple est qu’à ce jour aucune clé n’est nécessaire pour l’utiliser l’API, elle est donc très simple à appeler (pas d’inscription nécessaire notamment).

Notre application présentera un champ de saisie pour la requête, un bouton permettant de lancer la recherche, et une liste de résultats. Elle devra gérer un affichage spécifique pour les cas suivants :

  • la recherche n’a pas encore été lancée

  • la recherche est en cours

  • une erreur s’est produite

  • aucun résultat n’est renvoyé

  • au moins un résultat est renvoyé

images/ch4-1.png

Notre recherche d’adresse en action

L’intégralité de l’état de notre application sera stockée dans le state de Redux (et notamment le contenu du champ de saisie), et cela va de soi, nous utiliserons Redux-Saga ...