Gerenciamento de Estado com Redux e Vuex | Notion

1. Objetivos da Aula

Entender por que bibliotecas de estado são necessárias em SPAs modernas.
Compreender o fluxo de dados unidirecional de Redux e Vuex.
Aprender a criar rapidamente uma Store, Actions/Mutations e a conectar componentes.
Conhecer boas práticas de performance e depuração.

2. Cenário-Problema (2 min)

Imagine um e-commerce React ou Vue com:

Carrinho global.
Badge de itens no header.
Modal mostrando resumo.

Passar props encadeadas (“prop drilling”) torna-se frágil e difícil de manter quando a árvore cresce1 2. Daí surge a necessidade de um estado centralizado.

3. Princípios Comuns (Redux & Vuex) (3 min)

Conceito	Redux	Vuex
Store	Objeto imutável único3 4	Árvore reativa única5 6
Mutação	`reducer` puro: recebe (state, action) → novo state3	`mutation`: função sincrona que altera state7 6
Ação	Objeto `{type, payload}` (pode ser async via thunk)8	`action`: pode conter lógica assíncrona9 10
Fluxo	View → dispatch → Store → View atualizar	View → dispatch/commit → Store → View atualizar
DevTools	Time-travel, log de ações11 12	Timeline; debug reatividade, travel em Vuex 5.x13 14

4. Fluxo de Dados Visual

Após explicar, exiba os diagramas para fixar a ideia:

Fluxo de dados unidirecional no Redux

Fluxo de dados unidirecional no Redux

Fluxo de dados no Vuex

Fluxo de dados no Vuex

5. Código-Base em 3 Etapas (Redux Toolkit) (4 min)

Instalação
```
npm i @reduxjs/toolkit react-redux
```