Como baixar o Redux React
Redux React é uma poderosa biblioteca JavaScript que permite gerenciar o estado de seus aplicativos React de maneira centralizada e previsível. Ele também fornece otimizações de desempenho, ganchos personalizados e integração com a extensão Redux DevTools. Neste artigo, mostraremos como baixar, instalar e usar o Redux React em seus projetos.
O que é o Redux React?
Redux React é a camada oficial de vinculações de interface do usuário para Redux. Ele permite que seus componentes React leiam dados de uma loja Redux e enviem ações para a loja para atualizar o estado. Ele também implementa algumas melhores práticas e padrões para escrever código Redux, como o uso de atualizações imutáveis, funções de redutor puro e funções de seletor.
download redux react
Benefícios do Redux React
Alguns dos benefícios de usar o Redux React são:
Ele centraliza o sistema de gerenciamento de estado em um único armazenamento, o que facilita o acesso e a depuração.
Ele melhora o desempenho evitando novas renderizações desnecessárias e usando seletores memorizados.
Ele simplifica o código usando ganchos personalizados que abstraem a lógica de interação da loja.
Ele permite a depuração de viagem no tempo com a extensão Redux DevTools.
Ele suporta TypeScript e fornece definições de tipo para todas as suas APIs.
Erros comuns no Redux React
Alguns dos erros comuns que você pode encontrar ao usar o Redux React são:
Mutando os argumentos de estado ou ação nas funções redutoras. Isso pode causar bugs e interromper o recurso de depuração de viagem no tempo. Você sempre deve retornar um novo objeto de estado sem modificar o anterior.
Tendo efeitos colaterais nas funções redutoras. Isso pode tornar seu código imprevisível e difícil de testar. Você deve usar apenas funções puras que dependem de seus argumentos de estado e ação e usar middleware para qualquer lógica assíncrona ou impura.
Usando a re-renderização relacionada ao redux em seus componentes. Isso pode causar problemas de desempenho e atualizações desnecessárias.Você deve usar os ganchos useSelector e useDispatch em vez de conectar ou mapStateToProps e mapDispatchToProps.
Como instalar o Redux React
Para usar o Redux React com seu aplicativo React, você precisa instalar o Redux e o React Redux como dependências. Você pode usar npm ou yarn para fazer isso.
Pré-requisitos
Você precisa ter Node.js e npm ou yarn instalados em sua máquina. Você também precisa ter um aplicativo React configurado, usando create-react-app ou qualquer outra ferramenta.
Etapas para instalar o Redux React
Abra seu terminal e navegue até a pasta do seu projeto.
Execute o seguinte comando para instalar o Redux e o React Redux:
# Se você usar npm: npm install redux react-redux # Ou se você usar Yarn: yarn add redux react-redux
Você deve ver uma mensagem confirmando que a instalação foi bem-sucedida.
Como usar o Redux React
Para usar o Redux React em seu aplicativo, você precisa seguir estas etapas:
Criar uma Loja Redux
Uma loja Redux é um objeto que contém o estado do seu aplicativo e permite que você envie ações e assine alterações. Para criar uma loja, você precisa usar a API configureStore do Redux Toolkit, que é um pacote que simplifica o processo de desenvolvimento do Redux.
Crie um arquivo chamado src/app/store.js. Importe configureStore de @reduxjs/toolkit. Passe um objeto vazio como o argumento redutor por enquanto. Exporte a loja como padrão:
// src/app/store.js // src/app/store.js import configureStore de '@reduxjs/toolkit'; const store = configureStore( redutor: ); loja padrão de exportação;
Você pode adicionar mais redutores posteriormente ao criar suas fatias de estado.
Forneça o Redux Store para reagir
Para disponibilizar a loja Redux para seus componentes React, você precisa usar o componente Provider do React Redux. Ele envolve seu aplicativo e passa pela loja como um suporte.
Abra seu arquivo src/index.js. Importe o provedor de react-redux e armazene de src/app/store.js. Enrole seu componente com e passe store como prop:
// src/index.js importa React from 'react'; importar ReactDOM de 'react-dom'; importar Provider de 'react-redux'; importar loja de './app/store'; importar App de './App'; ReactDOM.render(
, document.getElementById('root') );
Agora seu aplicativo está pronto para usar o Redux React.
Criar uma fatia de estado Redux
Uma fatia de estado do Redux é uma parte do estado que corresponde a um recurso ou domínio específico do seu aplicativo. Consiste em uma função redutora, um estado inicial e alguns criadores de ações. Para criar uma fatia de estado, você precisa usar a API createSlice do Redux Toolkit, que gera todo o código clichê para você.
Por exemplo, vamos criar uma fatia de estado para um recurso de contagem. Crie um arquivo chamado src/features/counter/counterSlice.js. Importe createSlice de @reduxjs/toolkit. Chame createSlice com um objeto que tenha as seguintes propriedades:
name: Uma string que identifica a fatia. Ele será usado como um prefixo para os tipos de ação.
initialState: O valor inicial do estado.
redutores: Um objeto que define as funções do redutor para cada tipo de ação. As chaves são os nomes das ações e os valores são as funções redutoras que recebem o estado e a ação como argumentos e retornam o novo estado.
Exporte a fatia como padrão e também exporte os criadores de ações e a função seletora gerada por createSlice:
// src/features/counter/counterSlice.js import createSlice de '@reduxjs/toolkit'; const counterSlice = createSlice( name: 'counter', initialState: value: 0 , reducers: increment: (state) => // O Redux Toolkit nos permite escrever lógica "mutante" em redutores.Na verdade, ele // não muda o estado porque usa a biblioteca Immer, // que detecta alterações em um "estado de rascunho" e produz um novo // estado imutável com base nessas alterações state.value += 1; , decremento: (estado) => estado.valor -= 1; , incrementByAmount: (state, action) => // O payload é o argumento passado para o criador da ação state.value += action.payload; ); // Exporta a fatia como padrão export default counterSlice; // Exportar os criadores da ação export const increment, decrement, incrementByAmount = counterSlice.actions; // Exporta a função seletora export const selectCount = (state) => state.counter.value;
Você pode criar mais fatias de estado para outros recursos do seu aplicativo de maneira semelhante.
Acesse o estado do Redux e as ações de despacho
Para acessar o estado do Redux e as ações de dispatch em seus componentes React, você precisa usar os ganchos useSelector e useDispatch do React Redux. Eles permitem selecionar uma parte do estado e despachar uma ação sem usar connect ou mapStateToProps e mapDispatchToProps.
Por exemplo, vamos criar um componente que exiba o valor do contador e tenha alguns botões para incrementar, decrementar e incrementar em um valor personalizado. Crie um arquivo chamado src/features/counter/Counter.js. Importe React, useState, useSelector, useDispatch de seus respectivos pacotes. Importe incremento, decremento, incrementByAmount e selectCount de src/features/counter/counterSlice.js. Defina um componente funcional chamado Contador que faça o seguinte:
Use useSelector para obter o valor de contagem atual do armazenamento Redux passando selectCount como um argumento.
Use useDispatch para obter uma referência à função dispatch.
Use useState para criar uma variável de estado local chamada incrementAmount e defina seu valor inicial como 2.
Defina uma função chamada incrementValue que despacha uma ação de incremento.
Defina uma função denominada decrementValue que despacha uma ação de decremento.
Defina uma função denominada incrementValueByAmount que despacha uma ação incrementByAmount com incrementAmount como carga útil.
Defina uma função chamada onIncrementAmountChange que atualiza a variável de estado incrementAmount com o valor do elemento de entrada.
Retorne um elemento JSX que renderiza os seguintes elementos:
A elemento com o contador de nome de classe que contém:
A elemento que exibe "Contador"
A elemento com a linha do nome da classe que contém:
A elemento com o botão de nome de classe que possui um manipulador onClick que chama decrementValue e exibe "-"
A elemento com o valor do nome da classe que exibe o valor de contagem
A elemento com o botão de nome de classe que possui um manipulador onClick que chama incrementValue e exibe "+""
A elemento com a linha do nome da classe que contém:
A elemento com a caixa de texto de nome de classe que tem um atributo de valor igual a incrementAmount, um manipulador onChange que chama onIncrementAmountChange e um atributo de espaço reservado que diz "Insira o valor"
A elemento com o botão de nome de classe que tem um manipulador onClick que chama incrementValueByAmount e exibe "Add Amount"
O código do componente Counter deve ficar assim:
// src/features/counter/Counter.js import React, useState from 'react'; import useSelector, useDispatch de 'react-redux'; import increment, decrement, incrementByAmount, selectCount from './counterSlice'; export function Counter() // Obtém o valor de contagem atual da loja Redux const count = useSelector(selectCount); // Obtém uma referência para a função dispatch const dispatch = useDispatch(); // Cria uma variável de estado local para a quantidade de incremento const [incrementAmount, setIncrementAmount] = useState(2); // Defina uma função para despachar uma ação de incremento const incrementValue = () => dispatch(increment()); ; // Defina uma função para despachar uma ação de decremento const decrementValue = () => dispatch(decrement()); ; // Definir uma função para despachar uma ação incrementByAmount const incrementValueByAmount = () => dispatch(incrementByAmount(incrementAmount)); ; // Defina uma função para atualizar a variável de estado da quantidade de incremento const onIncrementAmountChange = (e) => setIncrementAmount(e.target.value); ; // Retorna um elemento JSX que renderiza o contador e os botões return (
Contador
-
contar
+
Adicionar valor
);
Você pode usar este componente em seu arquivo App.js ou qualquer outro componente que precise exibir e controlar o contador.
Conclusão
Neste artigo, aprendemos como baixar, instalar e usar o Redux React em nosso aplicativo React. Vimos como criar uma loja Redux, fornecê-la ao React, criar uma fatia de estado Redux e acessar o estado Redux e despachar ações em nossos componentes. Também aprendemos alguns dos benefícios e erros comuns do uso do Redux React.
O Redux React é uma ótima biblioteca para gerenciar o estado do seu aplicativo React de maneira centralizada e previsível. Ele também fornece otimizações de desempenho, ganchos personalizados e integração com a extensão Redux DevTools.Se você quiser saber mais sobre o Redux React, pode conferir sua documentação oficial aqui: [texto].
perguntas frequentes
O que é Redux?
Redux é uma biblioteca JavaScript para gerenciar o estado do seu aplicativo. Ele ajuda você a escrever aplicativos que se comportam de forma consistente, executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar.
O que é Reagir?
React é uma biblioteca JavaScript para construir interfaces de usuário. Ele permite criar componentes reutilizáveis que podem renderizar dados dinamicamente com base em props e state.
O que é o kit de ferramentas Redux?
Redux Toolkit é um pacote que simplifica o processo de desenvolvimento do Redux. Ele fornece APIs para criar e configurar uma loja, criar fatias de estado, escrever atualizações imutáveis e muito mais.
O que são ganchos personalizados?
Hooks personalizados são funções que permitem usar recursos do React, como estado e efeitos em suas próprias funções. Eles permitem que você reutilize e compartilhe a lógica entre os componentes.
O que é a extensão Redux DevTools?
A extensão Redux DevTools é uma extensão do navegador que permite inspecionar e depurar seu aplicativo Redux. Ele permite que você veja o estado, as ações e os redutores do seu aplicativo, bem como as ações de repetição e viagem no tempo.
0517a86e26
コメント