Estados globais: diferenças entre Redux e Context API

Estados globais: diferenças entre Redux e Context API
Matheus Alberto
Matheus Alberto

Compartilhe

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.

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.
Banner da Escola de Mobile: Matricula-se na escola de Mobile. Junte-se a uma comunidade de mais de 500 mil estudantes. Na Alura você tem acesso a todos os cursos em uma única assinatura; tem novos lançamentos a cada semana; desafios práticos. Clique e saiba mais!

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.

Veja o componente a seguir:

import React, { useState } from "react"
import { View, StyleSheet, Text } from "react-native"

export default function Flexin() {
  const [text, setText] = useState("Hello World")
  return (
  <View style={style.container}>
    <Text style={style.text}>{text}</Text>
    <TextInput style={style.input} onChangeText={newText => setText(newText)} placeholder="Digite um texto" value={text}/>
  </View>
  )
}

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?

Homem de cabelos relativamente longos e de bigode demonstra uma expressão confusa.

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:

<MeuComponente setText={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.
Uma animação de um botão escrito "deposit" sendo pressionado,o que leva o evento de clique para um dispatch, que, por sua vez, leva a ação de depósito 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.

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.

Vejamos um exemplo de propriedades:

export const conta = {
  corrente: {
    saldo: 1000,
  },
  previdencia: {
    saldo: 5000,
  }
};

Depois, crie um context com o valor padrão:

export const ContaContext = React.createContext(conta.corrente);

Para utilizar em algum componente, chame um componente de consumer e, dentro dele, chame o componente que você gostaria de passar a informação:

// app.js
import { ContaContext } from "./conta-context";

<ContaContext.consumer>
  <MostraSaldo/>
</ContaContext.consumer>
// mostraSaldo.js

import React from "react";
import { Text } from "react-native";

export default MostraSaldo()  {
  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!

Formação: React Native

Matheus Alberto
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.

Veja outros artigos sobre Mobile