Les Redux Devtools existent depuis presque aussi longtemps que Redux, et ont grandement contribué à l’adoption de ce dernier.
Installez les Redux Devtools
Les Redux Devtools existent sous deux formes :
Une librairie qui expose des composants React que l’on peut intégrer à nos applications.
Une extension pour Chrome et Firefox.
Nous allons uniquement utiliser l’extension car c’est la méthode la plus pratique : une fois installés sur le navigateur, les devtools seront disponibles pour tous nos projets !
Pour installer l’extension, il faut se rendre sur le store correspondant à votre navigateur :
Une fois l’extension installée, vous pouvez ouvrir les outils de développeurs de votre navigateur. Vous devriez voir un nouvel onglet “Redux” !
Voici à quoi cela ressemble sur Google Chrome :
Et sur Firefox :
Installer l’extension est un bon début, mais ce n’est pas suffisant. Pour que nos données apparaissent, il va falloir connecter votre store à l’extension.
Connectez Redux à l’extension
Pour connecter votre store à l’extension, on commence par récupérer les devtools s' ils existent. On va donc vérifier si la fonction window.__REDUX_DEVTOOLS_EXTENSION__ existe, et l’exécuter si c’est le cas :
const reduxDevtools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()Il ne reste plus qu'à passer la variable reduxDevtools en second paramètre de la fonction createStore de Redux.
const store = createStore(reducer, reduxDevtools);Si vous lancez l’application, vous devriez voir des données s’afficher dans le Redux Devtools !
Voyagez dans le temps grâce aux Redux Devtools
Les Redux Devtools permettent d’explorer le state et les actions qui sont envoyées en temps réel, mais aussi de revenir en arrière pour comprendre l'évolution de state pas à pas. Pour découvrir tout ça et même plus, rendez-vous dans le screencast ci-dessous !
Exercez-vous
Pour cet exercice, vous devrez seulement installer l’extension des Redux Devtools et connecter votre application.
Si vous avez bien suivi, vous savez qu’il n’y a que deux lignes de code à ajouter à votre application 🤓. Vous aurez donc le temps d’explorer un peu les Devtools.
D’ailleurs, j’ai un défi pour vous : saurez-vous changer le thème directement depuis les Devtools ?
Vous pouvez trouver le code avec le store connecté aux Redux Devtools sur la branche P3C2S4-solution du repository à cette adresse.
En résumé
Les Redux Devtools permettent de suivre l’évolution de notre state Redux en temps réel.
On peut revenir en arrière et rejouer les actions, et également dispatch directement depuis l’extension.
Pour que notre store apparaisse dans les Devtools, il faut ajouter un paramètre à la fonction
createStore.
Maintenant que l’on est équipé des Devtools, on va pouvoir s'attaquer à une fonctionnalité un peu plus complexe que le thème : la liste des freelances !
