Sommaire

Actions complexes et asynchrones

Jusque-là, notre manière d’utiliser Redux est restée relativement simple :

  • dans le composant nous dispatchons une action ;

  • l’action passe dans le reducer, qui met à jour le state ;

  • le composant est réaffiché pour tenir compte du nouveau state.

Si ce processus convient déjà à beaucoup de besoins, certains vont nous poser quelques problèmes : comment peut-on indiquer qu’une action doit à son tour dispatcher une autre action ? Comment peut-on faire en sorte qu’une action déclenche une requête HTTP (asynchrone donc) ?

Pour répondre à ces problèmes, il existe une bibliothèque qui va venir se greffer à Redux : Redux-Thunk (https://github.com/reduxjs/redux-thunk). Celle-ci se présente sous forme d’un middleware pour Redux, c’est-à-dire que l’on va indiquer à Redux que l’on souhaite l’utiliser, et cela suffira à ajouter de nouvelles possibilités que nous allons voir. Redux-Thunk

Afin de présenter Redux-Thunk, nous allons créer un chronomètre minimaliste, qui offrira les fonctionnalités suivantes :

  • être démarré, déclenchant ainsi l’affichage du nombre de secondes écoulées à partir de ce moment ;

  • être mis en pause momentanément ;

  • être remis à zéro.

Cet exemple ne pose aucune difficulté technique, d’ailleurs grâce ...