Aula 12 – Estado Global Avançado: Redux Toolkit 🏪

Quando a aplicação cresce demais, a Context API pode se tornar confusa. Para sistemas complexos de nível Enterprise, utilizamos o Redux Toolkit (RTK).

---

🏗️ O que é o Redux?

O Redux funciona como um "Banco de Dados compartilhado" para o frontend. Ele segue um fluxo de dados rigoroso e previsível.

Instalação:

$ npm install @reduxjs/toolkit react-redux

---

🍰 O Conceito de Slice

No Redux moderno, dividimos nosso estado em "fatias" (Slices). Cada slice contém o estado e as funções que o alteram.

// src/store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

---

🎣 Hooks do Redux

Para interagir com o Redux nos componentes funcionais, usamos dois hooks principais: - useSelector: Para ler dados da Store. - useDispatch: Para "disparar" uma ação de mudança.

const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();

<button onClick={() => dispatch(increment())}>+</button>

---

🚀 Prática da Aula

Vamos criar uma lista de "Favoritos" global.

1. Crie um favoritesSlice.
2. O estado deve ser uma lista de IDs de produtos.
3. Ao clicar no " ❤️ " em qualquer lugar da aplicação, o ID deve ser adicionado ao Redux.
4. Crie uma página de "Favoritos" que lê esses IDs e exibe os produtos correspondentes.

---

📊 Context API vs Redux

Recurso	Context API	Redux Toolkit
Curva de Aprendizado	Baixa	Média/Alta
Performance	Boa	Excelente (em larga escala)
Ferramentas de Debug	Limitadas	Redux DevTools (Incrível)

Dica: Redux DevTools

Instale a extensão do Chrome Redux DevTools. Ela permite que você "viaje no tempo", vendo exatamente o que mudou no estado a cada segundo!