baixar Redux DevTools

Como baixar e usar o Redux DevTools

Redux é uma das bibliotecas de gerenciamento de estado mais populares para aplicativos React. Ele ajuda você a gerenciar o estado do seu aplicativo de maneira previsível e consistente. No entanto, a depuração de aplicativos Redux pode ser desafiadora sem as ferramentas certas. É aí que o Redux DevTools é útil.

O que são Redux DevTools e por que usá-los?

Redux DevTools é um conjunto de ferramentas para depurar aplicativos Redux. Eles permitem que você inspecione o estado e as ações de seu aplicativo, além de manipulá-los em tempo real. Você também pode viajar no tempo e reproduzir ações para ver como o estado do seu aplicativo mudou ao longo do tempo. O Redux DevTools pode ser usado como uma extensão do navegador, um aplicativo independente ou um componente React integrado ao seu aplicativo.

download redux devtools

Download

Os benefícios do Redux DevTools incluem:

Inspecionando estado e ações

Você pode visualizar o estado atual de seu aplicativo e o histórico de ações que foram despachadas. Você também pode ver a diferença entre o estado anterior e o próximo, bem como a carga útil e o tipo de cada ação. Você também pode pesquisar uma ação específica ou um valor de estado usando filtros.

Ações de viagem no tempo e repetição

Você pode pular para qualquer ponto no passado ou no futuro do estado de seu aplicativo clicando em uma ação no histórico. Você também pode arrastar um controle deslizante para mover para frente e para trás no tempo. Você também pode reproduzir ações desde o início ou a partir de qualquer ponto no tempo. Isso pode ajudá-lo a depurar o comportamento do seu aplicativo e encontrar bugs.

Personalizando a interface do usuário e aprimorando o fluxo de trabalho

Você pode personalizar a aparência e o layout do Redux DevTools escolhendo entre diferentes temas, fontes e modos. Você também pode encaixar o painel devtools em diferentes posições na janela do navegador ou desanexá-lo em uma janela separada. Você também pode usar vários plug-ins e aprimoradores para adicionar mais funcionalidades ao Redux DevTools, como tabelas, gráficos, logs, testes, etc.

Como instalar o Redux DevTools?

Existem diferentes maneiras de instalar o Redux DevTools, dependendo de sua preferência e ambiente. Aqui estão algumas das opções mais comuns:

Instalando a extensão do navegador para Chrome, Firefox ou Edge

A maneira mais fácil de usar o Redux DevTools é instalar a extensão do navegador para Chrome, Firefox ou Edge. Isso adicionará um ícone do Redux à barra de ferramentas do navegador, no qual você pode clicar para abrir o pop-up do devtools. Você também pode acessar o painel devtools no menu de ferramentas do desenvolvedor do seu navegador.

Instalando o aplicativo independente ou o componente React

Se você não quiser usar a extensão do navegador, também pode instalar o Redux DevTools como um aplicativo independente executado em sua área de trabalho. Isso pode ser útil se você quiser depurar seu aplicativo em um navegador ou ambiente diferente. Como alternativa, você também pode instalar o Redux DevTools como um componente React que pode ser integrado à interface do usuário do seu aplicativo. Isso pode ser útil se você quiser personalizar a aparência do Redux DevTools ou usá-lo com outras estruturas.

Configurando o otimizador de loja e as opções de extensão

Para usar o Redux DevTools, você precisa configurar sua loja Redux com um aprimorador especial que habilita a funcionalidade devtools. Você pode fazer isso usando a função `composeWithDevTools` do pacote `redux-devtools-extension`. Essa função usa os intensificadores e middleware de sua loja como argumentos e retorna um novo aprimorador que conecta sua loja ao Redux DevTools. Por exemplo:

importar createStore, applyMiddleware de 'redux'; importar composeWithDevTools de 'redux-devtools-extension'; importar conversão de 'redux-thunk'; importar rootReducer de './redutores'; const store = createStore( rootReducer, composeWithDevTools( applyMiddleware(thunk) ) );

Você também pode passar algumas opções para a função `composeWithDevTools` para personalizar o comportamento do Redux DevTools.Por exemplo, você pode especificar o nome da sua instância, o número máximo de ações a serem mantidas no histórico, as ações a serem filtradas ou colocadas na lista negra, etc. Você pode encontrar mais detalhes sobre as opções disponíveis na documentação.

Como usar o Redux DevTools?

Depois de instalar e configurar o Redux DevTools, você pode começar a usá-los para depurar seu aplicativo Redux. Aqui estão algumas das etapas básicas para começar:

Usando o pop-up de extensão ou o painel devtools

Se estiver usando a extensão do navegador, você pode clicar no ícone Redux na barra de ferramentas do navegador para abrir o pop-up do devtools. Isso mostrará uma lista de suas instâncias do Redux e seu estado atual. Você pode selecionar uma instância para ver mais detalhes sobre seu estado e ações. Você também pode abrir o painel devtools no menu de ferramentas do desenvolvedor do seu navegador, selecionando a guia Redux. Isso mostrará as mesmas informações do pop-up, mas em uma visualização maior e mais interativa.

Usando os atalhos de teclado e o menu de comandos

Você pode usar vários atalhos de teclado para controlar o Redux DevTools e executar diferentes ações. Por exemplo, você pode usar Ctrl+H para alternar a visibilidade do painel devtools, Ctrl+Q para alterar sua posição, Ctrl+Z para desfazer uma ação, Ctrl+Shift+Z para refazer uma ação, etc. Você pode encontrar uma lista completa de atalhos de teclado e comandos na documentação.

Usando os recursos como rastrear, pular, bloquear, persistir, exportar, importar, etc.

O Redux DevTools oferece muitos recursos que podem ajudá-lo a depurar seu aplicativo e melhorar seu fluxo de trabalho. Alguns desses recursos incluem:

Vestígio: esse recurso permite que você veja onde e quando uma ação foi despachada em seu código. Você pode habilitá-lo clicando no botão Trace no painel devtools ou usando Ctrl+T. Você também pode ver um rastreamento de pilha de cada ação clicando nela no histórico.

Pular: esse recurso permite pular uma ação sem afetar o estado do aplicativo. Você pode ativá-lo clicando no botão Ignorar no painel devtools ou usando Ctrl+S. Você também pode alternar para pular todas as ações usando Ctrl+Shift+S.

Trancar: esse recurso permite bloquear o estado do seu aplicativo e impedir que novas ações sejam despachadas. Você pode ativá-lo clicando no botão Bloquear no painel devtools ou usando Ctrl+L.

Persistir: esse recurso permite que você mantenha o estado e as ações de seu aplicativo entre os recarregamentos de página. Você pode habilitá-lo clicando no botão Persist no painel devtools ou usando Ctrl+Shift+P.

Exportar: esse recurso permite exportar o estado e as ações do seu aplicativo como um arquivo JSON que você pode salvar ou compartilhar com outras pessoas. Você pode ativá-lo clicando no botão Exportar no painel devtools ou usando Ctrl+E.

Importar: esse recurso permite importar um arquivo JSON que contém o estado e as ações do seu aplicativo e carregá-lo no Redux DevTools. Você pode ativá-lo clicando no botão Importar no painel devtools ou usando Ctrl+I.

Conclusão

O Redux DevTools é um poderoso conjunto de ferramentas que pode ajudá-lo a depurar e melhorar seus aplicativos Redux. Eles permitem que você inspecione e manipule o estado e as ações de seu aplicativo, bem como viaje no tempo e reproduza-os. Eles também oferecem muitos recursos e opções que podem aprimorar seu fluxo de trabalho e personalizar sua interface do usuário. Você pode instalar o Redux DevTools como uma extensão do navegador, um aplicativo independente ou um componente React e configurá-los com o aprimorador e as opções da sua loja. Você também pode usar atalhos de teclado e comandos para acessar diferentes recursos e configurações do Redux DevTools. Se você quiser saber mais sobre o Redux DevTools, pode conferir o site oficial, o repositório GitHub e a documentação.

Redux DevTools é uma ferramenta obrigatória para qualquer desenvolvedor Redux.Eles podem ajudá-lo a depurar seu aplicativo com mais rapidez e facilidade, além de melhorar a qualidade e o desempenho do código. Se você ainda não os experimentou, definitivamente deveria experimentá-los e ver como eles podem melhorar sua experiência de desenvolvimento.

perguntas frequentes

P: Como uso Redux DevTools com React Native?

R: Você pode usar Redux DevTools com React Native instalando o React Native Debugger, que é um aplicativo de desktop que integra Redux DevTools, React DevTools e outras ferramentas para depurar aplicativos React Native.

P: Como uso Redux DevTools com TypeScript?

R: Você pode usar o Redux DevTools com TypeScript instalando o pacote @types/redux-devtools-extension, que fornece definições de tipo para o pacote `redux-devtools-extension`.

P: Como uso o Redux DevTools com o Redux Toolkit?

R: Você pode usar o Redux DevTools com o Redux Toolkit usando a função `configureStore` do pacote `@reduxjs/toolkit`, que configura automaticamente o otimizador de armazenamento e o middleware para o Redux DevTools.

P: Como faço para usar o Redux DevTools com o Next.js?

R: Você pode usar Redux DevTools com Next.js seguindo este guia, que mostra como configurar Redux e Redux DevTools em um projeto Next.js.

P: Como uso o Redux DevTools com o Electron?

R: Você pode usar o Redux DevTools com o Electron seguindo este guia, que mostra como configurar o Electron e o Redux DevTools em um projeto Electron.

0517a86e26