Estados globais: diferenças entre Redux e Context API
6 min6 minutos de leitura
6 min6 minutos de leitura
Introdução
Este artigo vai discutir as principais diferenças entre as duas ferramentas mais usadas para gerenciar estados globais de uma aplicação em React e React Native, assim como suas funcionalidades e exemplos de uso.
Autor(a)
Matheus Alberto
Formado em Sistemas de Informação na FIAP e em Design Gráfico na Escola Panamericana de Artes e Design. Trabalho como desenvolvedor e instrutor na Alura. Nas horas vagas sou artista/ilustrador.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Ao terminar de ler este artigo, você terá condições de escolher a melhor opção para o seu projeto!
Conteúdo
O que são Redux e Context API;
As diferenças entre as ferramentas;
Exemplos de utilização.
O que é Redux é para que serve?
Muito utilizadas em React e React Native, Redux e Context API são ferramentas que têm como finalidade gerenciar os estados globais, como, por exemplo, variáveis e funções de uma aplicação.
Mas por que você precisaria gerenciar estados globais de uma aplicação? Primeiro, vamos rever como funcionam os estados de um componente React Native.
Neste componente, a variável text tem estado variável, ou seja, a cada conteúdo novo digitado no TextInput, a variável text terá seu conteúdo alterado também. Para fazer isso, utilizamos useState() para controlar o estado dessa variável. Mais especificamente a função setText() que é atribuída pelo useState().
Ok, e qual o problema?
Bom, o problema começa quando precisamos alterar o estado dessa variável fora deste componente. Uma coisa muito importante de lembrar é que para alterar o valor (ou estado) da variável text precisamos da função setText() e ela só é acessível dentro deste componente.
Uma maneira de "resolver" esse problema é passar para um componente a função setText(). Por exemplo:
<MeuComponentesetText={setText}/>
O problema se torna mais crítico quando temos mais componentes dentro de outros (nesting). Páginas diferentes que podem alterar o estado dessa variável também precisam receber essa função. Se a aplicação crescer muito e diversos componentes podem/devem alterar o estado dessa variável, mais presos e interligados esses componentes vão ficar.
Isso é muito perigoso, porque a ideia de criar componentes é principalmente para melhorar a reutilização e até isolar comportamentos, deixando-os independentes na medida do possível. Com a solução atual, componentes que nem têm a função de alterar aquela variável precisam receber essa função, porque elas precisam passar para outro componente depois.
Para lidar melhor com essas situações em que componentes precisam alterar o estado de alguma coisa fora deles, foram criadas as ferramentas de Redux e Context API, e assim também introduzindo o conceito de variáveis globais.
Principais diferenças entre as ferramentas
Agora que sabemos a função dessas ferramentas, podemos discutir as principais diferenças entre elas. Vamos começar com o Redux.
Redux
Redux é uma biblioteca JavaScript, ou seja, ela pode ser usada fora do React/React Native. Para começar a usar o Redux, é necessário entender alguns conceitos:
Actions;
Reducers;
Store;
Dispatch.
Esses conceitos dariam um artigo, por isso oferecemos um resumo bem sucinto:
Actions são funções que alteram algum estado dentro da aplicação.
Reducers são funções que recebem um estado e o atualizam com a devida Action.
Store é onde os estados ficam guardados.
Dispatch é quem presta atenção em eventos dentro da aplicação (trata-se de um event listener ou "ouvinte de eventos" do Redux). Ou seja, quando um evento for chamado - um clique em botão, por exemplo -, ele executa um reducer com a devida action.
Quando o botão "deposit" é pressionado, ele leva o evento de clique para um dispatch, onde a ação de depósito é enviada para a store. Dentro da store, a função reducer altera o estado do valor da conta com a ação recebida pelo dispatch, alterando o valor que aparece em tela.
Os usos para o Redux são:
controle de aplicações que precisam ter estados alterados com uma alta frequência;
quando existem muitos estados para serem controlados;
a lógica para a atualização de um estado é muito complexa.
Desvantagens do Redux:
precisa de vários passos para implementar;
é uma ferramenta muito complexa para projetos mais simples.
Assim, aplicações menores podem se beneficiar de uma solução mais simples, o Context API.
Context API
O Context API é uma ferramenta nativa do React, o que facilita sua utilização e dispensa a instalação de pacotes
Ela é mais simples de começar a usar e mais focada em passar propriedades para componentes sem se preocupar com os níveis de nesting (componentes dentro de outros componentes).
Para começar a usar o context, primeiro é necessário declarar as propriedades que serão passadas para outros componentes.
// mostraSaldo.jsimportReactfrom"react";
import { Text } from"react-native";
exportdefaultMostraSaldo() {
let conta = this.context;
return (
<Text>conta.saldo</Text>
)
}
Neste exemplo, evitaremos muitos detalhes; nosso objetivo é mostrar que a estrutura mínima necessária para fazer o context funcionar é bem menor que a do Redux.
Os usos para o context:
aplicações que precisam acessar propriedades globalmente em outros componentes.
aplicações React e React Native.
Desvantagens:
quando muitas propriedades/objetos precisam ser passadas para diversos componentes.
quando a aplicação tem várias regras de negócios que precisam alterar vários estados de propriedades/objetos.
Condensando as diferenças
Vamos resumir brevemente as diferenças entre as duas ferramentas.
Redux
Utilizamos o Redux nos casos em que:
Aplicações que precisam ter estados alterados com uma alta frequência;
Aplicações com muitos estados para serem controlados;
Lógica para a atualização de um estado é muito complexa.
Desvantagens do Redux
Questões importantes sobre o Redux são:
Implementação requer vários passos;
Ferramenta muito complexa para projetos mais simples.
Context API
Usamos o context em:
Aplicações que precisam acessar propriedades globalmente em outros componentes;
Aplicações React e React Native.
Desvantagens
O Context API deixa de ser interessante quando:
Muitas propriedades/objetos precisam ser passadas para diversos componentes;
A aplicação tem várias regras de negócios que precisam alterar vários estados de propriedades/objetos.
Conclusão
Em resumo, é aquele ditado: cada ferramenta tem sua situação para uso. Não existe uma solução perfeita para todos os problemas, por isso, durante o planejamento inicial do projeto, é importante decidir qual ferramenta se encaixa melhor com as requisições.
Utilize este artigo para ajudar a decidir qual solução funciona para a sua aplicação.
Muito obrigado pelo seu tempo e aproveite para conferir outros conteúdos da plataforma!
