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...

Pour consulter la suite, découvrez le livre suivant :
couv_EIREA.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les effets de Redux-Saga
Suivant
Conclusion