Download da extensão redux devtools - download do código-fonte da extensão redux devtools

redux devtools extension

Outro código-fonte

v2.17.1

Baixar

️ ️ ️ ️ ️ ️

Este repositório não é mais o lar da extensão redux-devtools. A nova página inicial é https://github.com/reduxjs/redux-devtools. Por favor, registre seus problemas e PRs lá.

️ ️ ️ ️ ️ ️

Extensão Redux DevTools

Instalação

1. Para Cromo

da Chrome Web Store;
ou baixe extension.zip dos últimos lançamentos, descompacte, abra o URL chrome://extensions e ative o modo de desenvolvedor no canto superior esquerdo e clique em; em Load Unpacked e selecione a pasta extraída para uso
ou construa-o com npm i && npm run build:extension e carregue a pasta da extensão ./build/extension ;
ou execute-o no modo dev com npm i && npm start e carregue a pasta da extensão ./dev .

2. Para Firefox

dos complementos do Mozilla;
ou construa-o com npm i && npm run build:firefox e carregue a pasta da extensão ./build/firefox (basta selecionar um arquivo de dentro do diretório).

3. Para elétron

basta especificar REDUX_DEVTOOLS em electron-devtools-installer .

4. Para outros navegadores e ambientes sem navegador

use remote-redux-devtools .

Uso

Observe que a partir da v2.7, window.devToolsExtension foi renomeado para window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ .

1. Com Redux

1.1 Loja básica

Para uma loja Redux básica, basta adicionar:

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

Observe que o argumento preloadedState é opcional no createStore do Redux.

Para aplicativos universais ("isomórficos"), prefixe-os com typeof window !== 'undefined' && .

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

Para TypeScript, use o pacote redux-devtools-extension npm, que contém todas as definições, ou apenas use (window as any) (veja Receitas para obter um exemplo).

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

Caso o ESLint esteja configurado para não permitir o uso do sublinhado pendente, coloque-o assim:

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

Nota : Passar o intensificador como último argumento requer redux@>=3.1.0 . Para versões mais antigas, aplique como aqui ou aqui. Não misture a API Redux antiga com a nova.

Você não precisa npm install redux-devtools ao usar a extensão (é uma biblioteca diferente).

1.2 Configuração avançada da loja

Se você configurar sua loja com middleware e aprimoradores, altere:

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

Observe que quando a extensão não está instalada, estamos usando Redux compose aqui.

Para especificar as opções da extensão, use-a assim:

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

Veja a postagem para mais detalhes.

1.3 Use o pacote `redux-devtools-extension` do npm

Para facilitar as coisas, há um pacote npm para instalar:

 npm install --save redux-devtools-extension

e usar assim:

 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 as opções da extensão:

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

Existem apenas algumas linhas de código adicionadas ao seu pacote.

Caso você não inclua outros melhoradores e middlewares, basta usar 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 na produção

É útil incluir a extensão também na produção. Normalmente você pode usá-lo para desenvolvimento.

Se você quiser restringi-lo lá, 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
) ) ;

ou com middlewares e aprimoradores:

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

Você terá que adicionar 'process.env.NODE_ENV': JSON.stringify('production') na configuração do seu Webpack para o pacote de produção (para envify). Se você usar create-react-app , ele já faz isso por você.

Se você já estiver verificando process.env.NODE_ENV ao criar a loja, inclua redux-devtools-extension/logOnly para ambiente de produção.

Se você não quiser permitir a extensão em produção, basta usar redux-devtools-extension/developmentOnly .

Veja o artigo para mais detalhes.

1.5 Para aplicativos React Native, híbridos, desktop e Redux do lado do servidor

Para React Native podemos usar react-native-debugger , que já incluía a mesma API com Redux DevTools Extension.

Para a maioria das plataformas, inclua o aprimorador de armazenamento do Remote Redux DevTools e, no menu de contexto da extensão, escolha 'Open Remote DevTools' para monitoramento remoto.