DEV Community

Cover image for Gerenciamento de Estado com Context API vs Redux
Vitor Rios
Vitor Rios

Posted on

1

Gerenciamento de Estado com Context API vs Redux

Introdução

O gerenciamento de estado é um aspecto crucial no desenvolvimento de aplicações React. Existem diversas abordagens para gerenciar o estado global, sendo a Context API e o Redux duas das mais populares. Neste artigo, vamos explorar as diferenças entre elas, os casos de uso e como implementar cada uma, para ajudar você a decidir qual é a melhor para o seu projeto.

Context API

A Context API é uma solução nativa do React para passar dados de forma eficiente através da árvore de componentes sem a necessidade de passar props manualmente em cada nível.

Quando Usar a Context API
  • Estado Simples: Ideal para estados globais simples que não exigem lógica complexa.
  • Aplicações Pequenas: Funciona bem em aplicações pequenas e médias.
  • Evitar Biblioteca Externa: Se você prefere não adicionar dependências externas ao seu projeto.
Implementação da Context API

Vamos criar um exemplo simples para gerenciar o estado de autenticação de um usuário.

1. Criando o Contexto

import React, { createContext, useContext, useState } from 'react';

// Cria o contexto
const AuthContext = createContext(null);

// Provedor de contexto
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

// Hook para usar o contexto
export const useAuth = () => {
  return useContext(AuthContext);
};
Enter fullscreen mode Exit fullscreen mode

2. Usando o Contexto em Componentes

import React from 'react';
import { useAuth } from './AuthContext';

const UserProfile = () => {
  const { user, logout } = useAuth();

  return (
    <div>
      {user ? (
        <>
          <p>Welcome, {user.name}!</p>
          <button onClick={logout}>Logout</button>
        </>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
};

const App = () => {
  const { login } = useAuth();

  return (
    <div>
      <button onClick={() => login({ name: 'John Doe' })}>Login</button>
      <UserProfile />
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

Redux

Redux é uma biblioteca de gerenciamento de estado previsível para aplicações JavaScript. É amplamente utilizado em aplicações React para gerenciar estados complexos.

Quando Usar o Redux
  • Estado Complexo: Ideal para estados globais complexos e interdependentes.
  • Escalabilidade: Funciona bem em grandes aplicações que precisam de um gerenciamento de estado robusto.
  • DevTools: Oferece suporte a ferramentas de desenvolvimento, facilitando a depuração e rastreamento do estado.
Implementação do Redux

Vamos criar um exemplo simples para gerenciar o estado de autenticação de um usuário usando Redux.

1. Instalando Dependências

npm install redux react-redux
Enter fullscreen mode Exit fullscreen mode

2. Configurando o Redux Store

import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';

// Ação
const LOGIN = 'LOGIN';
const LOGOUT = 'LOGOUT';

const login = (user) => ({ type: LOGIN, payload: user });
const logout = () => ({ type: LOGOUT });

// Redutor
const authReducer = (state = { user: null }, action) => {
  switch (action.type) {
    case LOGIN:
      return { ...state, user: action.payload };
    case LOGOUT:
      return { ...state, user: null };
    default:
      return state;
  }
};

// Store
const store = createStore(authReducer);

export { login, logout, store };
Enter fullscreen mode Exit fullscreen mode

3. Usando Redux em Componentes

import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { login, logout, store } from './store';

const UserProfile = () => {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();

  return (
    <div>
      {user ? (
        <>
          <p>Welcome, {user.name}!</p>
          <button onClick={() => dispatch(logout())}>Logout</button>
        </>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
};

const App = () => {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(login({ name: 'John Doe' }))}>Login</button>
      <UserProfile />
    </div>
  );
};

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

export default Root;
Enter fullscreen mode Exit fullscreen mode

Comparação entre Context API e Redux

Complexidade:

  • Context API: Simples e fácil de configurar para estados simples.
  • Redux: Pode ser complexo devido à configuração inicial, mas oferece mais funcionalidades para estados complexos.

Escalabilidade:

  • Context API: Adequado para aplicações menores e estados simples.
  • Redux: Melhor para grandes aplicações com estados interdependentes.

Ferramentas de Desenvolvimento:

  • Context API: Sem suporte nativo para DevTools.
  • Redux: Suporte robusto para DevTools, facilitando a depuração.

Boas Práticas:

  • Use Context API para estados globais simples e localizados.
  • Use Redux para estados globais complexos e interdependentes que exigem um gerenciamento robusto e escalável.

Conclusão

Tanto a Context API quanto o Redux têm seus próprios méritos e são adequados para diferentes tipos de aplicações. A escolha entre eles depende da complexidade do estado da sua aplicação e dos requisitos de escalabilidade. A Context API é excelente para estados simples e localizados, enquanto o Redux é ideal para estados complexos em grandes aplicações.

Espero que este artigo tenha ajudado você a entender melhor as diferenças entre a Context API e o Redux, e quando usar cada um deles. Se tiver alguma dúvida ou sugestão, sinta-se à vontade para comentar!

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay