Échange de données entre une application Redux et le serveur

Cette section sera pour les élèves avertis, qui ne se sont pas arrêtés à ce qu'ils avaient accompli avec Redux et ont décidé d'aller jusqu'au bout de ce tutoriel. Dans les deux prochaines sections, nous aborderons le fonctionnement d'une application Redux avec une logique asynchrone, nous connecterons notre application au backend et apprendrons à échanger des données avec lui.

Des sections précédentes, nous savons que le fonctionnement d'une application Redux est basé sur un mécanisme synchrone. Les principales étapes consistent à envoyer des actions lors du déclenchement d'un événement dans l'application, puis à mettre à jour l'état dans le store par la fonction réductrice, à notifier les composants de l'application du changement d'état et, par conséquent, à afficher la nouvelle valeur de l'état dans les composants.

Dans la vraie vie, il arrive souvent que l'application ait besoin d'une logique asynchrone, par exemple lors de travaux avec des requêtes HTTP API et de récupération de données depuis un serveur externe. Par conséquent, pour que notre store Redux 'synchrone' puisse fonctionner avec une telle logique asynchrone, on utilise ce qu'on appelle un middleware - un logiciel faisant office d'intermédiaire ou de liaison entre le store de notre application et, par exemple, le serveur, avec lequel nous commencerons à travailler dans ce chapitre du tutoriel.

De nombreux middlewares ont été créés pour Redux, mais le plus répandu parmi eux et officiellement recommandé pour le fonctionnement des applications Redux avec une logique asynchrone reste encore Redux Thunk. Ce logiciel nous aide à utiliser des fonctions ordinaires (ou thunks), qui peuvent contenir une logique asynchrone, telle que setTimeout, Promises, async/await, pour interagir avec notre store. En ce qui concerne le terme lui-même, un thunk est un code qui effectue un travail différé.

Maintenant que nous nous sommes familiarisés avec la manière de travailler avec la logique asynchrone dans Redux, nous pouvons commencer à mettre en œuvre cette étape dans notre application. Nous devons faire en sorte que notre application puisse interagir avec un serveur externe, en recevant et en lui transmettant des données. En d'autres termes, nous avons devant nous un sujet passionnant et très important. Commençons.