React Redux vs Context API

React Redux vs Context API

O React Redux e o Context API são ferramentas que gerenciam o estado global da aplicação e servem para facilitar a comunicação de dados entre os componentes.

Os frameworks são usados para armazenar informações em variáveis de fácil acesso. Sem essas bibliotecas de gerenciamento de estado, o único jeito de passar informações entre os componentes é por props, ou seja, o pai passa a informação para o elemento filho, o filho para o próximo elemento, e assim por diante. Este problema se chama prop drilling. Quando o programa tem muitos componentes, passar props manualmente se torna algo extremamente trabalhoso e repetitivo.

Então, qual gerenciador de estado deve ser usado nas aplicações? A resposta é: depende. Ambas as tecnologias possuem vantagens e desvantagens. Vamos abordá-las nos próximos tópicos.

Quais as principais diferenças entre as frameworks?

A principal diferença entre as duas frameworks é a complexidade e a organização. As duas têm contextos em que uma será melhor do que a outra.

Por exemplo, em aplicações que precisam de um nível mais refinado de organização e que lidam com várias regras de negócio, faz muito mais sentido usar o Redux, porém, em uma aplicação mais simples ou para um iniciante querendo entender o funcionamento do estado global, será mais prático usar o Context API.

React Redux

O Redux é uma biblioteca responsável por gerenciar os dados da aplicação de maneira unidirecional. Todos os dados devem ir em direção ao estado global.

Essa biblioteca usa de conceitos um pouco complexos, como actions, reducers, stores e dispatches:

Store

No React, o estado global é um objeto com propriedades que podem ser acessadas por outros elementos, nesse objeto é onde os dados do estado ficam armazenados. É um centro de informações que consegue receber e enviar dados para os componentes.

Action

As actions, como o próprio nome diz, são ações que mandamos para a store. Por exemplo, é possível criar e mandar uma action chamada CHANGE_NAME que irá alterar o nome do usuário salvo na store, porém, a action é somente a intenção de uma mudança e para ser efetivamente usada precisamos do reducer.

Reducer

O reducer usa as informações retornadas pela action para efetivamente alterar o estado, para ser disparado em um clique ou qualquer outro evento, precisamos do dispatch.

Dispatch

Usamos o dispatch para disparar o reducer.

Mesmo o redux sendo muito útil, ele é complexo e tem vários passos para seu uso. Veja no exemplo a seguir como é o setup inicial de Redux no React.

Primeiro é necessário criar nossa pasta de arquivos e instalar o Redux.

npx create-react-app hello-react-redux

cd hello-react-redux

npm install redux react-redux

npm install --save-dev @types/react-redux

Após a criação do diretório e a instalação das dependências, será necessário importar o Provider no index.js e passar o store como props.

src/index.js

Depois é preciso importar a função createStore do Redux e passar o rootReducer como parâmetro para criar o estado global.

/src/store/index.js

Agora importamos a função combineReducer e criamos o rootReducer. O rootReducer é responsável por trabalhar com diversos reducers na mesma store.

/src/reducers/index.js

Depois do rootReducer é preciso criar um reducer, no caso do exemplo, será o user.

/src/reducers/user.js

Por fim uma action simples, responsável por alterar o nome do usuário.

Agora o setup inicial do Redux está pronto. Para usar os dados em um componente é preciso conectá-lo à store.

A aplicação do exemplo anterior possui o estado inicial de “Sem nome” renderizado na tela. Ao digitar no input e clicar no botão, alteramos o nome no estado global e, por consequência, o nome renderizado na tela.

É evidente que são muitos passos, mas ele é um framework muito poderoso. Quando aplicado em projetos de maior porte, a organização é bem mais clara que o Context API, mas quando o seu projeto é menor e mais simples, pode ser mais vantajoso usar o Context.

Context API

O Context API, diferente do Redux, é nativo do React, ou seja, não será necessário instalar nenhuma biblioteca adicional. Assim como o Redux, o Context API serve para tratar os dados da aplicação de maneira unidirecional. Para demonstrar melhor as diferenças entre as tecnologias faremos uma aplicação igual à anterior, porém, usando Context.

npx create-react-app hello-context-api

cd hello-context-api

Inicialmente criamos o Provider. Nele usamos a hook useState do React para criar estados simples e enviamos esses estados como uma propriedade do NameAppContext.Provider.

/src/context/Provider

Depois deve ser criado o Context, elemento que dá acesso aos dados do Provider.

/src/context/NameAppContext.js

Por fim, importamos o Provider e renderizamos o App dentro dele no index.js.

/src/index.js

Agora é possível acessar os dados dentro do componente App.js. Os únicos passos necessários após a criação do setup inicial são: importar o useContext, importar o Context criado e seguir a sintaxe abaixo.

No exemplo anterior usamos bem menos conceitos para controlar o estado global. O Context não precisa de actions ou reducers e acessa de forma direta e simples o estado global da aplicação (também fica fácil de visualizar o funcionamento das funções do Context).

Conclusão

O Redux e o Context trabalham com o estado global e ambos podem ser usados. O Redux é muito mais versátil que o Context API e pode ser facilmente aplicado em diversas linguagens diferentes, também, por ter várias peças bem definidas, é muito mais fácil separar e organizar a aplicação com Redux. Agora, no ambiente React, o Context API sempre deve ser uma opção a ser analisada. Sua configuração simples e direta muitas vezes pode agilizar a entrega de um trabalho que não precisa de tanta sofisticação.

Ao pensar na longevidade de um projeto que ficará cada vez maior, mesmo a aplicação começando simples, vale a pena organizar o gerenciamento de estado global com o React Redux.

No final: React Redux ou Context Api?

Nem sempre será necessário usar um gerenciador de estado global. Algumas vezes a aplicação é simples demais para ter essa necessidade.

O Redux deve ser usado quando existem vários estados para se controlar ou quando vários componentes usam as informações de um mesmo estado. Já o Context é melhor quando temos poucas regras de negócio ou quando a aplicação tem poucos componentes.

⚠️
As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.