Débogage des applications Redux avec Redux DevTools et Trace dans Editor / Blogs / Perficient

Le débogage des applications Web modernes peut être une tâche difficile. Redux DevTools est un excellent outil pour suivre les changements d’état et répartir les actions dans les applications Redux. Combiné avec les cartes sources dans Webpack, vous pouvez facilement retracer votre code source d’origine, ce qui rend le débogage beaucoup plus simple. Dans cet article, nous expliquerons la configuration de Redux DevTools et l’activation des cartes sources dans Webpack.

Étape 1 : Configuration de Redux DevTools

Tout d’abord, intégrons Redux DevTools dans notre application Redux.

Installez les outils de développement Redux

npm install --save redux-devtools-extension

Configurez votre boutique pour utiliser Redux DevTools

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import todoReducer from './reducers';

const composeEnhancers = composeWithDevTools({
  trace: true,  // enable tracing
});

const store = createStore(todoReducer, composeEnhancers());
export default store;

Si vous avez un middleware à appliquer, vous pouvez intégrer Redux DevTools avec « applyMiddleware » :

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  composeWithDevTools({
    trace: true, // enable tracing
  })(applyMiddleware(thunk))
);

export default store;

Dans cette configuration, « composeWithDevTools » intègre Redux DevTools à notre boutique, nous permettant de surveiller les actions et les changements d’état.

Étape 2 : Activation des cartes sources dans Webpack

Pour rendre notre processus de débogage plus fluide, nous pouvons activer les mappages sources dans Webpack. Les cartes sources nous permettent de voir le code source d’origine plutôt que le code minifié et groupé lors du débogage dans le navigateur.

Mettre à jour la configuration du Webpack

En ajoutant ‘devtool: ‘source-map’, Webpack génère des mappages de sources qui vous aident à remonter au code source d’origine lors du débogage.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devtool: 'source-map',
  devServer: {
    contentBase: './dist',
  },
};

Étape 3 : Utilisation de Redux DevTools

Une fois que vous avez configuré Redux DevTools, vous pouvez commencer à l’utiliser pour déboguer votre application :

1. Ouvrez l’extension Redux DevTools dans votre navigateur

• • Dans Chrome, vous pouvez le trouver sous Plus d’outils > Extensions > Redux DevTools.
  • Dans Firefox, il sera disponible sous forme d’icône dans la barre d’outils.

2. Surveiller les actions et les changements d’état

L’extension Redux DevTools fournit une vue détaillée des actions et des changements d’état :

• • Liste d’action: Visualisez la liste des actions réparties dans votre application.
  • Arbre d’état: Inspectez l’arborescence d’état actuelle après chaque action.
  • Charges utiles d’action: affichez les charges utiles de chaque action envoyée.
  • Débogage du voyage dans le temps: passez d’un état à l’autre dans l’historique de votre application pour voir comment l’état change au fil du temps.
  • Actions de répartition: distribuez manuellement des actions pour voir comment l’état change.

3. Utilisez des fonctionnalités telles que Log Monitor, Chart Monitor et Inspector :

• • Moniteur de journaux : Fournit une expérience de type console avec les actions et les états enregistrés.
  • Moniteur de graphiques: Visualise l’arborescence des états sous forme de graphique.
  • Inspecteur: Offre une vue détaillée de l’état actuel et des différences entre les états.

Dans les applications à grande échelle, où les mêmes actions sont déclenchées simultanément à partir de différentes parties de l’application, il peut être difficile d’identifier la cause première de l’envoi d’une action. C’est là que la fonctionnalité de trace devient inestimable pour les développeurs.

Traçage des actions dans l’éditeur

Redux DevTools améliore la capacité de tracer les actions en vous permettant de naviguer directement vers le point spécifique de la base de code où une action a été envoyée. Ceci est particulièrement utile pour les bases de code volumineuses, car cela permet de gagner beaucoup de temps en localisant rapidement l’endroit exact dans le code. Vous pouvez configurer l’éditeur depuis les paramètres de l’extension :

• Ajoutez l’éditeur requis avec lequel vous souhaitez déboguer l’application dans l’éditeur externe.
• Mettez à jour le chemin absolu du projet.

Exemples de paramètres :

Accédez à Redux DevTools et recherchez le répartiteur dans Trace. Cliquez sur le répartiteur requis et il vous dirigera vers VSCode une fois que vous l’aurez configuré correctement.

Image Gif montrant comment tracer l’application à l’aide de Redux DevTools dans VS Code.

Conclusion

En intégrant Redux DevTools et en activant les mappages sources dans Webpack, vous pouvez améliorer considérablement votre expérience de débogage des applications Redux. Redux DevTools fournit une interface puissante pour suivre les changements d’état et les actions. Dans le même temps, les mappages sources vous permettent de remonter jusqu’au code source d’origine, ce qui facilite l’identification et la résolution des problèmes dans votre application.

Avec ces outils dans votre arsenal, vous serez bien équipé pour gérer même les tâches de débogage les plus difficiles dans vos applications Redux.