Reactotron : Vous avez un nouvel ami

le

Côté extensions Chrome, on est plutôt vernis pour ReactJS.

On a d’un côté les React Developer Tools ainsi que les Redux Devtools, qui sont l’un et l’autre indispensables pour développer / débugger une application ReactJS / Redux.

Ca pourrait s’arrêter là, après tout ces deux extensions font vraiment bien leur job. Redux Devtools permet de jouer / rejouer les actions, de commit de skip, React Devtools permet d’inspecter les composants, leurs props et leur state. Bref, que demandez de plus ?

Beeeeeeen, peut être une application desktop pour débugger une application React / Redux mais en plus React Native ?

Ca tombe bien.

Ouaip, ça tombe super bien même, il existe une app qui permet de retrouver le même genre d’outils. Mais pas que.

Reactotron, c’est, notamment :

  • La possibilité de voir le state de l’application
  • De voir toutes les requêtes aux APIs REST
  • De tester les performances
  • D’afficher les logs comme on le fait habituellement avec la console
  • De dispatcher des actions directement depuis Reactotron (trop cool pour débugger)
  • De faire tout ça aussi avec React Native

L’ami Nico l’a notamment utilisé sur un gros projet client React Native où on était en galère avec des APIs qui retournaient souvent des erreurs. Ca a été utile notamment pour checker la communication avec le back, et transmettre des screens assez complets aux devs pour illustrer nos soucis. Gain de temps lorsqu’il s’agit d’expliquer ce qu’on envoi comme params et ce qu’on reçoit comme réponse.

Assez parlé

Le mieux c’est encore de tester tout ça sur un projet, si possible un projet ReactJS / Redux.

Tout commence par le téléchargement de l’app, dispo sur OSX, Windows et Linux (vraiment aucune raison de s’en passer !).

Rien de particulier, passons à la configuration interminable à mettre en place sur votre projet. J’espère que vous avez le coeur bien accroché :

On commence par installer le package avec npm :

npm i --save-dev reactotron-react-js

Puis on créé un fichier de config à la racine du projet, appelons le ReactotronConfig.js pour faire dans l’originalité.

La config de base de Reacotron (celle avec laquelle vous n’allez pas en faire de masses), c’est :

import Reactotron from 'reactotron-react-js'

Reactotron
  .configure()
  .connect();

Ensuite il suffit d’importer votre config dans votre projet (dans l’index, c est parfait) :

import './ReactotronConfig'

A partir de là, vous allez pouvoir utiliser Reactotron partout dans votre app. Finalement, c’est comme utiliser un bon vieux console.log, sauf que vous utiliserez plutôt :

Reactotron.log()

Vous avez à votre disposition toute une liste de méthodes pour vous aider à travailler.

Ca manque de fun ?

Jusqu’ici on a fondamentalement juste décentralisé la consultation de nos logs sur une appli desktop, pour ReactJS et React Native.  C’est plutôt cool, mais on peut mieux faire.

 

C’est ce qu’on va démontrer avec Redux.

Encore une fois, l’installation est assez complexe, ça commence par le package npm qui va bien :

npm install --save-dev reactotron-redux

Et ensuite, c’est de la config. On édite notre fichier de config Reactotron :

import { reactotronRedux } from 'reactotron-redux'

Reactotron
  .configure({ name: 'React Native Demo' })
  .use(reactotronRedux())
  .connect()

Il faudra ensuite modifier votre createStore afin d’utiliser celui de Reactotron, en gros, remplacer ceci :

const store = createStore(rootReducer, compose(middleware))

Par cela :

const store = Reactotron.createStore(rootReducer, compose(middleware))

Vous pouvez continuer à utiliser vos middlewares et vous pouvez aussi exclure certaines actions ou highlighter celles qui vous semblent importantes.

On peut aller encore plus loin avec les SAGAS afin de vérifier les calls ou les puts

C’est pas tout

Maintenant qu’on a pluggé Reactotron avec Redux et Redux Sagas, on est capable :

  • Rejouer une action
  • Dispatcher une action
  • De faire un snapshot de notre state, ce qui est vraiment (vraiment vraiment) pratique pour rejouer une série d’actions, autant pour débugger que pour gagner du temps en évitant de refaire le parcours utilisateur pour arriver là vous voulez.
En faisant un snapshot, vous avez la possibilité de déclencher plus tard toutes les actions dispatchées jusqu’ici. Autant pour revenir à l’état initial au moment du snapshot que demain, ou l’année prochaine si le coeur vous en dit.

On a fait un tour non exhaustif de ce que propose Reactotron, il existe bien d’autres avantages à découvrir sur le repo.

 

Un commentaire Ajoutez le votre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *