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>; } 

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', }; 

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); 

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; } }; 

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); 

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 

• 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; } }; 

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); 

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>  ); } 

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>  ); } 

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; 

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; 

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.