Redux Toolkit (RTK)

O Redux Toolkit é a abordagem recomendada para escrever lógica Redux. Ele simplifica a configuração da store, a criação de reducers e a gestão de estados imutáveis.

---

Por que usar RTK?

1. Menos boilerplate: Reduz drasticamente a quantidade de código necessária para configurar o Redux.
2. Imutabilidade simplificada: Usa a biblioteca Immer internamente, permitindo escrever lógica que "parece" mutável (ex: state.value = 1), mas que é tratada de forma imutável.
3. Configuração de Store: O configureStore já vem com middlewares úteis (como o redux-thunk ou integração com DevTools) por padrão.

---

Conceitos Principais

1. Slices

Um "Slice" é uma coleção de lógica de reducer e ações para uma única funcionalidade do seu aplicativo.

import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: {
    profile: null,
    isAuthenticated: false,
  },
  reducers: {
    setUser: (state, action) => {
      // Graças ao Immer, podemos "mutar" o estado diretamente
      state.profile = action.payload;
      state.isAuthenticated = true;
    },
    logout: (state) => {
      state.profile = null;
      state.isAuthenticated = false;
    },
  },
});

export const { setUser, logout } = userSlice.actions;
export default userSlice.reducer;

2. configureStore

Centraliza todos os reducers da aplicação.

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './features/user/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

---

Quando usar?

• Estado Global Complexo: Quando dados precisam ser acessados por muitos componentes em níveis diferentes da árvore.
• Sincronização de Dados: Quando múltiplas partes da UI precisam reagir à mesma mudança de estado.
• Cache de Infraestrutura: Para armazenar tokens, preferências de usuário ou estados que persistem durante a sessão (em conjunto com a Camada de Aplicação).

---

Quando NÃO usar?

• Dados Locais de Tela: Se o dado é usado apenas em uma tela, use useState ou o hook da tela.
• Server State: Para dados que vêm da API, prefira o TanStack Query, pois ele gerencia cache e sincronização de forma mais eficiente que o Redux puro.
• Simplicidade: Não adicione Redux se o problema pode ser resolvido com Props ou Context API de forma simples.

---

Redux Saga

No nosso projeto:

• Redux Saga: Usado para gerenciar efeitos colaterais (side-effects) complexos e assíncronos que precisam ser orquestrados globalmente.

---

Melhores Práticas

1. Não coloque tudo no Redux: Avalie se o estado é realmente global.
2. Use Seletores: Utilize seletores para extrair dados da store, facilitando a manutenção se a estrutura do estado mudar.
3. Evite dados duplicados: Mantenha o estado o mais normalizado possível.