6 minutos de leitura
Autor(a)
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.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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!
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.
Agora que sabemos a função dessas ferramentas, podemos discutir as principais diferenças entre elas. Vamos começar com o 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:
Esses conceitos dariam um artigo, por isso oferecemos um resumo bem sucinto:
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:
Desvantagens do Redux:
Assim, aplicações menores podem se beneficiar de uma solução mais simples, o 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:
Desvantagens:
Vamos resumir brevemente as diferenças entre as duas ferramentas.
Utilizamos o Redux nos casos em que:
Questões importantes sobre o Redux são:
Usamos o context em:
O Context API deixa de ser interessante quando:
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
Avalie este artigo
