Estados globais: diferenças entre Redux e Context API

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.

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?

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.

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