• 15 heures
  • Difficile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 07/03/2022

Tirez profit des Redux Devtools

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 :

Extension Redux DevTools pour Chrome qui affiche un message pour indiquer qu’aucun store n’a été trouvé.
Extension Redux DevTools pour Chrome

Et sur Firefox :

Extension Redux DevTools pour Firefox qui affiche un message pour indiquer qu’aucun store n’a été trouvé.
Extension Redux DevTools pour 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 !

Store connecté à l’extension Redux DevTools
Store connecté à l’extension 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 !

Exemple de certificat de réussite
Exemple de certificat de réussite