DEV Community

Cover image for React Redux
Henrique Vital
Henrique Vital

Posted on

React Redux

Vamos explorar Redux e useState detalhadamente, duas ferramentas essenciais para o gerenciamento de estado em aplicações React. Vamos começar com useState, que é mais simples e utilizado diretamente no React, e depois vamos para Redux, que é uma solução mais robusta para gerenciamento de estado em aplicações maiores.


1. useState (Hook do React)

O useState é um hook que permite adicionar e manipular estado em componentes funcionais do React. Anteriormente, o estado era uma característica exclusiva dos componentes de classe, mas com a introdução dos hooks, o useState trouxe uma maneira simples de usar estado em componentes funcionais.

Como Usar o useState:

  1. Importação: O hook useState deve ser importado do React.
   import React, { useState } from 'react';
Enter fullscreen mode Exit fullscreen mode
  1. Declarando o Estado: Dentro de um componente funcional, usamos useState para declarar o estado. Ele retorna dois valores:
    • O valor do estado (o valor atual).
    • Uma função para atualizar esse estado.

Exemplo básico de uso:

   const [count, setCount] = useState(0); // 0 é o valor inicial

   const increment = () => setCount(count + 1); // Função para atualizar o estado
Enter fullscreen mode Exit fullscreen mode
  1. Como Funciona:

    • useState(0) define o valor inicial do estado como 0.
    • count é o valor atual do estado.
    • setCount é a função que atualiza o valor de count.
    • Quando setCount é chamado, o componente é re-renderizado com o novo valor do estado.
  2. Exemplo Completo:

   import React, { useState } from 'react';

   function Counter() {
     const [count, setCount] = useState(0);

     const increment = () => {
       setCount(count + 1); // Atualiza o estado
     };

     return (
       <div>
         <p>Contagem: {count}</p>
         <button onClick={increment}>Incrementar</button>
       </div>
     );
   }

   export default Counter;
Enter fullscreen mode Exit fullscreen mode

Nesse exemplo, sempre que o botão for clicado, o contador (count) será incrementado, e o componente será re-renderizado com o novo valor.


2. Redux

O Redux é uma biblioteca de gerenciamento de estado previsível para JavaScript, comumente usada em aplicações React. Ele é particularmente útil em grandes aplicações onde o estado precisa ser compartilhado entre diferentes componentes de maneira eficiente e previsível.

Como o Redux Funciona:

O Redux segue um fluxo de dados unidirecional e é baseado em três princípios principais:

  1. Uma Única Fonte de Verdade:
    O estado da aplicação é armazenado em um único objeto (store). Isso significa que todo o estado da aplicação é centralizado e acessado a partir de um único ponto.

  2. O Estado é Somente Leitura:
    O estado só pode ser alterado por meio de ações. Essas ações são objetos que descrevem o que aconteceu na aplicação.

  3. Mudanças Através de Funções Puras (Reducers):
    Para alterar o estado, você usa reducers, que são funções puras (funções que retornam um novo valor sem modificar o estado original).

Passos para Configurar o Redux:

  1. Instalação: Primeiro, você precisa instalar o Redux e o React-Redux (para integrar o Redux ao React):
   npm install redux react-redux
Enter fullscreen mode Exit fullscreen mode
  1. Criando a Store: A store centraliza o estado da aplicação. Você cria a store com o createStore() do Redux e passa o reducer como argumento.
   import { createStore } from 'redux';

   // Exemplo de um reducer simples
   const initialState = { count: 0 };

   function counterReducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { count: state.count + 1 };
       case 'DECREMENT':
         return { count: state.count - 1 };
       default:
         return state;
     }
   }

   const store = createStore(counterReducer);
Enter fullscreen mode Exit fullscreen mode
  1. Criando Ações (Actions): As ações são objetos que descrevem a intenção de mudar o estado. Uma ação deve ter uma propriedade type que descreve a ação.
   const incrementAction = { type: 'INCREMENT' };
   const decrementAction = { type: 'DECREMENT' };
Enter fullscreen mode Exit fullscreen mode
  1. Usando o Provider do React-Redux: Para conectar o Redux com o React, você usa o Provider para passar a store para o restante da sua aplicação.
   import React from 'react';
   import { Provider } from 'react-redux';
   import { store } from './store'; // Importando a store criada

   function App() {
     return (
       <Provider store={store}>
         <Counter />
       </Provider>
     );
   }
Enter fullscreen mode Exit fullscreen mode
  1. Conectando Componentes com o Redux: Para conectar um componente ao estado global, você usa a função connect. O connect conecta o estado da store ao seu componente React.
   import React from 'react';
   import { connect } from 'react-redux';

   function Counter({ count, increment, decrement }) {
     return (
       <div>
         <p>Contagem: {count}</p>
         <button onClick={increment}>Incrementar</button>
         <button onClick={decrement}>Decrementar</button>
       </div>
     );
   }

   const mapStateToProps = (state) => ({
     count: state.count
   });

   const mapDispatchToProps = (dispatch) => ({
     increment: () => dispatch({ type: 'INCREMENT' }),
     decrement: () => dispatch({ type: 'DECREMENT' })
   });

   export default connect(mapStateToProps, mapDispatchToProps)(Counter);
Enter fullscreen mode Exit fullscreen mode
  • mapStateToProps: Mapeia o estado global da store para as props do componente.
  • mapDispatchToProps: Mapeia as funções de envio de ações (dispatch) para as props do componente.
  1. Fluxo de Dados no Redux:
    • Store: Contém o estado da aplicação.
    • Actions: Objetos que descrevem o que aconteceu.
    • Reducers: Funções que atualizam o estado com base nas ações recebidas.

Exemplo Completo de Redux com React:

// Redux - Store e Reducer
import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

// React Component - Counter.js
import React from 'react';
import { connect } from 'react-redux';

function Counter({ count, increment, decrement }) {
  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={increment}>Incrementar</button>
      <button onClick={decrement}>Decrementar</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  count: state.count
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

// App.js - Provider
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store'; // Importando a store criada
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Diferenças Entre useState e Redux:

  • Escopo: useState é ideal para gerenciar estados locais dentro de um componente, enquanto o Redux é melhor para gerenciar estados globais compartilhados por múltiplos componentes.
  • Simplicidade: useState é simples e direto, enquanto o Redux exige mais configuração (como actions, reducers e store) e é melhor para estados mais complexos e escaláveis.
  • Reatividade: O Redux permite que diferentes componentes da aplicação compartilhem um único estado global, tornando o gerenciamento de dados mais previsível em grandes aplicações.

Espero que essa explicação tenha ficado clara! Se você tiver dúvidas em algum ponto ou quiser mais detalhes, estou à disposição para ajudar. 😊

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay