Téléchargement de l'extension redux devtools - Extension redux devtools Téléchargement du code source

redux devtools extension

Autre code source

v2.17.1

Télécharger

️ ️ ️ ️ ️ ️

Ce dépôt n'héberge plus l'extension redux-devtools. La nouvelle maison est https://github.com/reduxjs/redux-devtools. Veuillez y déposer vos problèmes et PR.

️ ️ ️ ️ ️ ️

Extension Redux DevTools

Installation

1. Pour Chrome

depuis le Chrome Web Store ;
ou téléchargez extension.zip à partir des dernières versions, décompressez, ouvrez l'url chrome://extensions et activez le mode développeur en haut à gauche, puis cliquez sur ; sur Load Unpacked et sélectionnez le dossier extrait à utiliser
ou construisez-le avec npm i && npm run build:extension et chargez le dossier de l'extension ./build/extension ;
ou exécutez-le en mode développement avec npm i && npm start et chargez le dossier de l'extension ./dev .

2. Pour Firefox

à partir des modules complémentaires Mozilla ;
ou construisez-le avec npm i && npm run build:firefox et chargez le dossier de l'extension ./build/firefox (sélectionnez simplement un fichier dans le répertoire).

3. Pour l'électron

spécifiez simplement REDUX_DEVTOOLS dans electron-devtools-installer .

4. Pour les autres navigateurs et environnements sans navigateur

utilisez remote-redux-devtools .

Usage

Notez qu'à partir de la v2.7, window.devToolsExtension a été renommé window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ .

1. Avec Redux

1.1 Magasin de base

Pour un magasin Redux de base, ajoutez simplement :

 const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

Notez que l'argument preloadedState est facultatif dans createStore de Redux.

Pour les applications universelles (« isomorphes »), préfixez-les avec typeof window !== 'undefined' && .

 const composeEnhancers = ( typeof window !== 'undefined' && window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ) || compose ;

Pour TypeScript, utilisez le package npm redux-devtools-extension , qui contient toutes les définitions, ou utilisez simplement (window as any) (voir Recettes pour un exemple).

 const composeEnhancers = ( window as any ) . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose ;

Si ESLint est configuré pour ne pas autoriser l'utilisation du trait de soulignement, enveloppez-le comme ceci :

 + /* eslint-disable no-underscore-dangle */
  const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
+ /* eslint-enable */

Remarque : Passer l'amplificateur comme dernier argument nécessite redux@>=3.1.0 . Pour les anciennes versions, appliquez-le comme ici ou ici. Ne mélangez pas l'ancienne API Redux avec la nouvelle.

Vous n'avez pas besoin d'installer npm redux-devtools lorsque vous utilisez l'extension (c'est une bibliothèque différente).

1.2 Configuration avancée du magasin

Si vous configurez votre boutique avec un middleware et des optimiseurs, modifiez :

  import { createStore, applyMiddleware, compose } from 'redux';

+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
    applyMiddleware(...middleware)
  ));

Notez que lorsque l'extension n'est pas installée, nous utilisons ici Redux compose.

Pour spécifier les options de l'extension, utilisez-la comme ceci :

 const composeEnhancers =
  typeof window === 'object' &&
  window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ( {
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    } ) : compose ;

const enhancer = composeEnhancers (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ;
const store = createStore ( reducer , enhancer ) ;

Voir l'article pour plus de détails.

1.3 Utiliser le package `redux-devtools-extension` de npm

Pour faciliter les choses, il existe un package npm à installer :

 npm install --save redux-devtools-extension

et à utiliser comme ceci :

 import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension' ;

const store = createStore ( reducer , composeWithDevTools (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ) ;

Pour spécifier les options de l'extension :

 import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension' ;

const composeEnhancers = composeWithDevTools ( {
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
} ) ;
const store = createStore ( reducer , /* preloadedState, */ composeEnhancers (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ) ;

Il n'y a que quelques lignes de code ajoutées à votre bundle.

Si vous n'incluez pas d'autres optimiseurs et middlewares, utilisez simplement devToolsEnhancer :

 import { createStore } from 'redux' ;
import { devToolsEnhancer } from 'redux-devtools-extension' ;

const store = createStore ( reducer , /* preloadedState, */ devToolsEnhancer (
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
) ) ;

1.4 Utilisation en production

Il est également utile d'inclure l'extension dans la production. Habituellement, vous pouvez l'utiliser pour le développement.

Si vous souhaitez le restreindre ici, utilisez redux-devtools-extension/logOnlyInProduction :

 import { createStore } from 'redux' ;
import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction' ;

const store = createStore ( reducer , /* preloadedState, */ devToolsEnhancer (
  // options like actionSanitizer, stateSanitizer
) ) ;

ou avec des middlewares et des Enhancers :

 import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction' ;

const composeEnhancers = composeWithDevTools ( {
  // options like actionSanitizer, stateSanitizer
} ) ;
const store = createStore ( reducer , /* preloadedState, */ composeEnhancers (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ) ;

Vous devrez ajouter 'process.env.NODE_ENV': JSON.stringify('production') dans votre configuration Webpack pour le bundle de production (à envify). Si vous utilisez create-react-app , il le fait déjà pour vous.

Si vous vérifiez déjà process.env.NODE_ENV lors de la création du magasin, incluez redux-devtools-extension/logOnly pour l'environnement de production.

Si vous ne souhaitez pas autoriser l'extension en production, utilisez simplement redux-devtools-extension/developmentOnly .

Voir l'article pour plus de détails.

1.5 Pour les applications Redux React Native, hybrides, de bureau et côté serveur

Pour React Native, nous pouvons utiliser react-native-debugger , qui incluait déjà la même API avec l'extension Redux DevTools.

Pour la plupart des plates-formes, incluez l'amplificateur de magasin de Remote Redux DevTools et, dans le menu contextuel de l'extension, choisissez « Ouvrir Remote DevTools » pour la surveillance à distance.