Tutorial avançado do React: Integração do Redux com a API de contexto

Quando se trata de gerenciar o estado em grandes aplicações React, duas abordagens se destacam como as mais populares: Redux e a API de Contexto do React. Ambas têm suas vantagens e desvantagens, mas e se você quiser combiná-las para obter o melhor dos dois mundos? Neste artigo, examinaremos como alcançar essa integração e quais benefícios ela pode trazer ao seu projeto.

Por que considerar a combinação?

Gerenciar o estado em aplicações complexas pode ser um verdadeiro desafio. O Redux, com sua arquitetura centralizada em estado, possibilita gerenciar mudanças de maneira previsível e consistente. No entanto, não é incomum que seu boilerplate se torne um fardo. Por outro lado, a API de Contexto é nativa do React e oferece uma maneira fácil de compartilhar dados entre componentes sem a necessidade de passar propriedades manualmente, mas apresenta limitações quando um gerenciamento de estado mais estruturado é necessário. Integramos essas abordagens não apenas para melhorar a eficiência do gerenciamento de estado, mas também para reduzir a quantidade de código redundante que frequentemente acompanha o Redux. Configurando o projeto Começaremos configurando um novo projeto React no qual implementaremos o Redux e a API de Contexto. Primeiro, certifique-se de ter o Node.js e um gerenciador de pacotes como npm ou yarn instalados. Inicialize um novo projeto usando o Create React App:

$ npx create-react-app my-redux-context-app
$ cd my-redux-context-app

Instalando o Redux e as configurações iniciais

Depois que o projeto for criado, prossiga com a instalação do Redux e do react-redux usando o npm ou o yarn:

$ npm install redux react-redux

Crie uma pasta chamada store dentro do diretório src e dentro dela adicione um arquivo chamado index.js. É aqui que você definirá seus redutores e criará o armazenamento:

// src/store/index.js
import { createStore } from redux;
// Defina seu redutor
const initialState = {};
function rootReducer(state = initialState, action) {
  return state;
}
const store = createStore(rootReducer);
export default store;

Implementação da API de Contexto

Agora, vamos para a API de Contexto. Crie uma nova pasta chamada context dentro do diretório src. Dentro, crie um arquivo AppContext.js:

// src/context/AppContext.js
import React from react;
const AppContext = React.createContext();
export default AppContext;

Em seguida, encapsulamos nosso aplicativo com o Redux Provider e o Context Provider:

// src/index.js
import React from react;
import ReactDOM from react-dom;
import { Provider } from react-redux;
import App from ./App;
import store from ./store;
import AppContext from ./context/AppContext;

ReactDOM.render(, document.getElementById(root));

Caso prático: Contador combinado

Vamos imaginar que queremos implementar um contador cujo estado depende tanto do nosso armazenamento global via Redux quanto do contexto local. Usaremos o Redux para lidar com as ações relacionadas ao incremento ou decremento, enquanto definiremos algum valor específico em nosso contexto.

// src/components/Counter.js
import React from react;
import { useSelector, useDispatch } from react-redux;
import AppContext from ../context/AppContext;

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  const contextValue = React.useContext(AppContext); // Obtendo dados do contexto {count}</p>
      <p>Valor do contexto: {contextValue.someValue}</p>
    </div>
 }
export default Counter;

Vantagens e Limitações

A principal vantagem de usar ambos os sistemas é a flexibilidade em termos de controle de estado. Isso permite segmentar responsabilidades e otimizar partes específicas de acordo com as necessidades do componente ou módulo em questão. No entanto, a integração de sistemas diferentes como esses pode aumentar a complexidade geral do código se não for gerenciada adequadamente.

Outros artigos que podem lhe interessar