📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 15: Redux Toolkit & RTK Query

Especialização em Frontend com React

---

🗺️ O Fluxo de Dados Previsível do Redux Toolkit (RTK)

flowchart LR
    DISPATCH["dispatch(adicionarItem(produto))"]
    --> SLICE["createSlice({ name: 'carrinho', reducers: { ... } })\n(Usa Immer sob o capô para permitir mutações aparentes seguras!)"]
    --> STORE["Redux Store (Estado Global Imutável)"]
    STORE --> SELECTOR["useSelector((state: RootState) => state.carrinho.itens)"]
    SELECTOR --> COMP["Componente Atualizado"]

    style DISPATCH fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style SLICE fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style STORE fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style SELECTOR fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style COMP fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px

---

🎯 Slide 1: Modernizando com createSlice

• O Redux Toolkit eliminou a necessidade de escrever action types, action creators e reducers em arquivos separados.

• Immer Integrado: Permite escrever state.itens.push(action.payload) de forma expressiva enquanto o Immer produz um novo estado 100% imutável por baixo dos panos!

---

🎯 Slide 2: Exemplo de Slice Corporativo

export const carrinhoSlice = createSlice({
  name: 'carrinho',
  initialState: { itens: [] } as Estado,
  reducers: {
    adicionarItem: (state, action: PayloadAction<Produto>) => {
      state.itens.push(action.payload);
    },
    limpar: (state) => {
      state.itens = [];
    }
  }
});

---

🎯 Slide 3: RTK Query para APIs Corporativas

• Uma solução de data fetching e caching completa embutida diretamente no Redux Toolkit com geração automática de hooks React (useGetProdutosQuery)!

---

🔗 Navegação do Capítulo 15

📖 Ler Conteúdo Completo

🧠 Fazer Quiz

💻 Ver Exemplos

🧩 Exercícios

Slide 1 de 1

Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim