Descarga de la extensión redux devtools - descarga del código fuente de la extensión redux devtools

redux devtools extension

Otro código fuente

v2.17.1

Descargar

️ ️ ️ ️ ️ ️

Este repositorio ya no es el hogar de la extensión redux-devtools. El nuevo hogar es https://github.com/reduxjs/redux-devtools. Presente sus problemas y relaciones públicas allí.

️ ️ ️ ️ ️ ️

Extensión de herramientas de desarrollo de Redux

Instalación

1. Para cromo

de Chrome Web Store;
o descargue extension.zip de las últimas versiones, descomprímala, abra la URL chrome://extensions y active el modo de desarrollador desde la parte superior izquierda y luego haga clic en; en Load Unpacked y seleccione la carpeta extraída para usar
o compílelo con npm i && npm run build:extension y cargue la carpeta de la extensión ./build/extension ;
o ejecútelo en modo de desarrollo con npm i && npm start y cargue la carpeta de la extensión ./dev .

2. Para Firefox

de Complementos de Mozilla;
o compílelo con npm i && npm run build:firefox y cargue la carpeta de la extensión ./build/firefox (simplemente seleccione un archivo desde dentro del directorio).

3. Para electrones

simplemente especifique REDUX_DEVTOOLS en electron-devtools-installer .

4. Para otros navegadores y entornos sin navegador

Utilice remote-redux-devtools .

Uso

Tenga en cuenta que a partir de v2.7, se cambió el nombre window.devToolsExtension a window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ .

1. Con Redux

1.1 Tienda básica

Para una tienda Redux básica simplemente agregue:

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

Tenga en cuenta que el argumento preloadedState es opcional en createStore de Redux.

Para aplicaciones universales ("isomorfas"), antepóngale typeof window !== 'undefined' && .

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

Para TypeScript, utilice el paquete npm redux-devtools-extension , que contiene todas las definiciones, o simplemente utilice (window as any) (consulte Recetas para ver un ejemplo).

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

En caso de que ESLint esté configurado para no permitir el uso del guión bajo, envuélvalo así:

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

Nota : pasar el potenciador como último argumento requiere redux@>=3.1.0 . Para versiones anteriores, aplíquelo como aquí o aquí. No mezcle la antigua API de Redux con la nueva.

No necesita instalar npm redux-devtools cuando usa la extensión (esa es una biblioteca diferente).

1.2 Configuración avanzada de la tienda

Si configura su tienda con middleware y potenciadores, cambie:

  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)
  ));

Tenga en cuenta que cuando la extensión no está instalada, aquí usamos Redux Compose.

Para especificar las opciones de la extensión, utilícela así:

 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 ) ;

Vea la publicación para más detalles.

1.3 Utilice el paquete `redux-devtools-extension` de npm

Para facilitar las cosas, hay un paquete npm para instalar:

 npm install --save redux-devtools-extension

y para usar así:

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

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

Para especificar las opciones de la extensión:

 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
) ) ;

Solo se agregaron unas pocas líneas de código a su paquete.

En caso de que no incluya otros potenciadores y middlewares, simplemente use 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 Uso en producción

También es útil incluir la extensión en producción. Generalmente puedes usarlo para el desarrollo.

Si desea restringirlo allí, use 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
) ) ;

o con middlewares y potenciadores:

 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
) ) ;

Tendrá que agregar 'process.env.NODE_ENV': JSON.stringify('production') en la configuración de su paquete web para el paquete de producción (para envify). Si usa create-react-app , ya lo hace por usted.

Si ya está verificando process.env.NODE_ENV al crear la tienda, incluya redux-devtools-extension/logOnly para el entorno de producción.

Si no desea permitir la extensión en producción, simplemente use redux-devtools-extension/developmentOnly .

Consulte el artículo para obtener más detalles.

1.5 Para aplicaciones Redux React Native, híbridas, de escritorio y de servidor

Para React Native podemos usar react-native-debugger , que ya incluía la misma API con Redux DevTools Extension.

Para la mayoría de las plataformas, incluya el potenciador de tienda de Remote Redux DevTools y, en el menú contextual de la extensión, elija 'Abrir Remote DevTools' para monitoreo remoto.