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 realizar essa integração e quais benefícios ela pode trazer para o 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, permite um gerenciamento de mudanças previsível e consistente. No entanto, não é incomum que seu código repetitivo 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 precisar passar props manualmente, mas tem limitações quando um gerenciamento de estado mais estruturado é necessário.

Integramos essas abordagens não apenas para melhorar a eficiência no 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 React projeto no qual implementaremos o Redux e a API de Contexto. Primeiro, certifique-se de ter o Node.js e um gerenciador de pacotes como o npm ou o 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 configurações iniciais

Após a criação do projeto, instale o Redux e o react-redux usando npm ou yarn:

$ npm install redux react-redux

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

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

API de implementação do Contexto

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

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

Em seguida, envolvemos nossa aplicação 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 store global via Redux quanto do contexto local. Usaremos o Redux para lidar com ações relacionadas a incremento ou decremento, definindo um 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

  return (
    <div>
     <p>Contador: {count}</p>
      <p>Valor do contexto: {contextValue.someValue}