DEV Community

Cover image for Redux com React
Henrique Vital
Henrique Vital

Posted on

Redux com React

Claro, Henrique! O Módulo 30: Introdução ao Redux com React é um dos módulos essenciais para entender como gerenciar o estado de aplicações React de forma eficiente, especialmente quando elas se tornam complexas e o uso do prop drilling (passagem de dados entre componentes) começa a ser um problema.

O que é o Redux?

O Redux é uma biblioteca de gerenciamento de estado que foi criada para resolver problemas como:

  • Prop Drilling: Quando você precisa passar dados entre vários componentes, criando uma árvore de componentes cada vez mais complexa.
  • Controle de estado em aplicações grandes: O Redux ajuda a centralizar o estado da aplicação, tornando-o previsível e fácil de debugar.

No Redux, o estado global da aplicação é gerido por uma Store (loja), e o fluxo de dados é feito através de Actions (ações) e Reducers (redutores). O Redux segue o padrão de fluxo unidirecional de dados, o que ajuda a ter um controle mais claro de como o estado é modificado.


Passo a Passo do Módulo 30

1. O Problema do Prop Drilling

Prop drilling ocorre quando você precisa passar dados de um componente pai para um componente filho, e depois para um outro componente, até chegar ao componente mais profundo que precisa desses dados. Isso pode se tornar um problema quando sua árvore de componentes é profunda, o que dificulta o controle e a manutenção do código.

Exemplo de prop drilling:

function Pai() {
  const [nome, setNome] = useState("Henrique");
  return <Filho nome={nome} />;
}

function Filho({ nome }) {
  return <Neto nome={nome} />;
}

function Neto({ nome }) {
  return <h1>{nome}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, o valor de nome precisa ser passado do componente Pai para Filho e depois para Neto. Quando temos muitos níveis de componentes, esse processo de passagem de dados se torna difícil de gerenciar.

2. A Solução: Redux

Redux resolve esse problema criando uma Store centralizada onde o estado global da aplicação fica armazenado. Em vez de passar dados através de props entre vários componentes, o Redux permite que qualquer componente acesse o estado diretamente da Store, facilitando a gestão do estado da aplicação.


3. Fluxo de Dados no Redux

O fluxo de dados no Redux é unidirecional, o que significa que as mudanças de estado seguem um caminho bem definido:

  1. Ação (Action): Uma ação é um objeto JavaScript simples que descreve o que aconteceu. Uma ação tem pelo menos uma propriedade type, que descreve o tipo da ação, e pode ter outras propriedades com dados adicionais.
   const minhaAcao = {
     type: 'ADICIONAR_ITEM',
     payload: 'Novo item',
   };
Enter fullscreen mode Exit fullscreen mode
  1. Dispatcher: A dispatcher é responsável por enviar as ações para o reducer. Isso é feito usando o método dispatch, geralmente através de hooks como useDispatch() no React.
   dispatch(minhaAcao);
Enter fullscreen mode Exit fullscreen mode
  1. Reducer: O reducer é uma função que recebe o estado atual e a ação, e retorna um novo estado. Ele não deve modificar o estado atual, mas sempre retornar uma nova versão dele. Cada ação tem um tipo, e o reducer decide como modificar o estado com base nesse tipo.

Exemplo de um reducer:

   const estadoInicial = {
     itens: [],
   };

   const reducer = (estado = estadoInicial, acao) => {
     switch (acao.type) {
       case 'ADICIONAR_ITEM':
         return {
           ...estado,
           itens: [...estado.itens, acao.payload],
         };
       default:
         return estado;
     }
   };
Enter fullscreen mode Exit fullscreen mode
  1. Store: A store é o local onde o estado da aplicação é armazenado. A store pode ser configurada usando o createStore do Redux.

Exemplo de configuração de store:

   import { createStore } from 'redux';

   const store = createStore(reducer);
Enter fullscreen mode Exit fullscreen mode
  1. View: A view (geralmente, os componentes do React) escuta as mudanças de estado na Store e atualiza a interface do usuário conforme necessário.

4. Integrando o Redux com React

O Redux funciona bem com o React quando usamos a biblioteca react-redux, que fornece hooks e componentes para integrar a Store do Redux aos componentes do React.

5. Passos para Integrar Redux no React

Passo 1: Instalar as dependências

Para começar a usar o Redux com React, você precisa instalar duas dependências:

npm install redux react-redux
Enter fullscreen mode Exit fullscreen mode
  • redux: A biblioteca central do Redux.
  • react-redux: A biblioteca que conecta o Redux ao React.

Passo 2: Criar um Reducer

Crie um reducer que irá gerenciar o estado da aplicação:

const estadoInicial = {
  contador: 0,
};

const contadorReducer = (estado = estadoInicial, acao) => {
  switch (acao.type) {
    case 'INCREMENTAR':
      return {
        ...estado,
        contador: estado.contador + 1,
      };
    default:
      return estado;
  }
};
Enter fullscreen mode Exit fullscreen mode

Passo 3: Configurar a Store

Crie a store, que vai armazenar o estado central da aplicação:

import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(contadorReducer);
Enter fullscreen mode Exit fullscreen mode

Passo 4: Conectar o Redux ao React com o Provider

Para conectar a Store ao React, você envolve o componente raiz da aplicação com o Provider, passando a store como propriedade:

import { Provider } from 'react-redux';
import { store } from './store'; // onde a store está configurada

function App() {
  return (
    <Provider store={store}>
      <MeuComponente />
    </Provider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Passo 5: Usar useDispatch e useSelector no React

Agora, no seu componente React, você pode acessar e modificar o estado usando os hooks useSelector e useDispatch do react-redux.

  • useSelector: Esse hook permite acessar o estado global da aplicação.
  • useDispatch: Esse hook é usado para disparar ações e atualizar o estado.

Exemplo de como usar esses hooks:

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

function MeuComponente() {
  const contador = useSelector((estado) => estado.contador);
  const dispatch = useDispatch();

  const incrementar = () => {
    dispatch({ type: 'INCREMENTAR' });
  };

  return (
    <div>
      <h1>{contador}</h1>
      <button onClick={incrementar}>Incrementar</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

6. Conceito de Slices e Reducers no Redux Toolkit

O Redux Toolkit é uma versão aprimorada e mais fácil de usar do Redux. Ele fornece métodos como createSlice e createAsyncThunk, que facilitam a criação de reducers e ações.

Exemplo usando Redux Toolkit:

import { createSlice } from '@reduxjs/toolkit';

const contadorSlice = createSlice({
  name: 'contador',
  initialState: { contador: 0 },
  reducers: {
    incrementar: (state) => {
      state.contador += 1;
    },
  },
});

export const { incrementar } = contadorSlice.actions;
export default contadorSlice.reducer;
Enter fullscreen mode Exit fullscreen mode

7. Seletores e Atualizando o Estado no Redux

Um seletor é uma função que permite acessar partes específicas do estado na store. Em vez de acessar o estado diretamente, você usa um seletor para obter as informações de forma mais organizada.

const selectContador = (estado) => estado.contador;
Enter fullscreen mode Exit fullscreen mode

8. Redux Toolkit Query

O Redux Toolkit Query é uma ferramenta para facilitar a realização de requisições HTTP e o gerenciamento de dados relacionados ao servidor. Ele permite que você configure facilmente endpoints e trate requisições assíncronas.


Conclusão

Aprendemos os conceitos fundamentais do Redux e como ele ajuda a gerenciar o estado em aplicações React. Vimos o fluxo de dados unidirecional do Redux, a criação de actions, reducers, e store, e como integrá-los com o React utilizando o react-redux. Também discutimos o Redux Toolkit, que simplifica ainda mais o uso do Redux, e como fazer requisições assíncronas com o Redux Toolkit Query.

O Redux é uma ferramenta poderosa, especialmente para grandes aplicações com estados complexos. Com ele, você consegue centralizar e gerenciar o estado de forma previsível e fácil de debugar.

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

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay