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:
Ação (Action): Uma ação é um objeto JavaScript simples que descreve o que aconteceu. Uma ação tem pelo menos uma propriedadetype, que descreve o tipo da ação, e pode ter outras propriedades com dados adicionais.
const minhaAcao = {
type: 'ADICIONAR_ITEM',
payload: 'Novo item',
};
Dispatcher: A dispatcher é responsável por enviar as ações para o reducer. Isso é feito usando o métododispatch, geralmente através de hooks comouseDispatch()no React.
dispatch(minhaAcao);
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;
}
};
Store: A store é o local onde o estado da aplicação é armazenado. A store pode ser configurada usando ocreateStoredo Redux.
Exemplo de configuração de store:
import { createStore } from 'redux';
const store = createStore(reducer);
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.
SOCIAL SHARE CARD GENERATOR