Redux Store

O LipMKT utiliza Redux Toolkit para gerenciamento de estado global com padrão modular por feature.

📦 Estrutura Padrão

Cada feature possui sua própria pasta com 5 arquivos especializados:

store/conversations/
├── types.ts        # TypeScript interfaces e tipos
├── services.ts     # Chamadas de API/Firebase
├── reducers.ts     # Slice + Async thunks
├── selectors.ts    # Seletores memoizados
└── actions.ts      # Action creators (opcional)

🏗️ Arquitetura dos 5 Arquivos

1. types.ts - Definições de Tipos

Propósito: Centralizar todas as interfaces TypeScript da feature.

Contém:

Interface do estado da feature (AuthState, ConversationsState, etc.)
Interfaces de entidades (User, Conversation, Message, etc.)
Tipos de filtros e parâmetros
Enums e tipos auxiliares

Benefícios:

Type safety em toda a aplicação
Autocomplete no IDE
Documentação implícita do código
Facilita refatoração

2. services.ts - Camada de Serviços

Propósito: Isolar toda a lógica de comunicação externa (API, Firebase, etc.).

Contém:

Funções assíncronas para buscar dados
Operações CRUD (Create, Read, Update, Delete)
Transformação de dados da API para o formato do app
Tratamento de erros de rede

Benefícios:

Separação de responsabilidades
Facilita testes unitários (mock dos serviços)
Reutilização de lógica de API
Mudanças na API não afetam os reducers

Exemplo de estrutura:

3. reducers.ts - Lógica de Estado

Propósito: Gerenciar o estado da feature e suas transformações.

Contém:

createSlice do Redux Toolkit
Estado inicial da feature
Reducers síncronos (ações imediatas)
createAsyncThunk para operações assíncronas
Extra reducers para lidar com estados de loading

Benefícios:

Imutabilidade garantida (Immer.js)
Menos boilerplate que Redux tradicional
Estados de loading/error automáticos
DevTools integration

Estrutura típica:

4. selectors.ts - Acesso ao Estado

Propósito: Fornecer funções para acessar e derivar dados do estado.

Contém:

Seletores simples (acesso direto ao estado)
Seletores memoizados com createSelector (Reselect)
Lógica de filtragem e transformação de dados
Computações derivadas do estado

Benefícios:

Performance (memoização evita recálculos)
Encapsulamento (componentes não conhecem estrutura do estado)
Reutilização de lógica de seleção
Facilita refatoração da estrutura do estado

Exemplo:

5. actions.ts - Action Creators (Opcional)

Propósito: Exportar actions para uso em componentes.

Contém:

Re-exportação de actions do slice
Actions customizadas complexas
Action creators com lógica adicional

Benefícios:

Ponto único de importação
Facilita descoberta de actions disponíveis
Permite adicionar lógica antes de disparar action

Nota: Com Redux Toolkit, este arquivo é opcional pois o createSlice já gera os action creators automaticamente.

🔄 Fluxo de Dados

Componente
    ↓ dispatch(action)
Reducer (reducers.ts)
    ↓ chama
Service (services.ts)
    ↓ retorna dados
Reducer atualiza estado
    ↓
Selector (selectors.ts)
    ↓ lê estado
Componente re-renderiza

🎯 Features Implementadas

1. Auth Store

Responsabilidade: Gerenciar autenticação e dados do usuário logado.

Estado gerenciado:

Usuário atual (dados, role, permissions)
Status de autenticação
Estados de loading e erro

Principais operações:

Login/Logout
Refresh de token
Atualização de perfil do usuário
Verificação de permissões

2. Conversations Store

Responsabilidade: Gerenciar conversas do WhatsApp e mensagens.

Estado gerenciado:

Lista de conversas
Conversação ativa
Mensagens da conversação
Filtros aplicados

Principais operações:

Buscar conversas por empresa
Carregar mensagens de uma conversação
Atribuir conversação a um agente
Atualizar status (bot/human/closed)
Filtrar por status, prioridade, agente

3. Flows Store

Responsabilidade: Gerenciar fluxos de automação (chatbot flows).

Estado gerenciado:

Lista de fluxos
Fluxo ativo em edição
Nodes e edges do fluxo visual
Status de execução

Principais operações:

CRUD de fluxos
Ativar/desativar fluxos
Editar nodes e conexões
Executar fluxo para uma conversação
Validar estrutura do fluxo

4. Agents Store

Responsabilidade: Gerenciar agentes (atendentes) da empresa.

Estado gerenciado:

Lista de agentes
Status online/offline
Conversas atribuídas
Métricas de performance

Principais operações:

Listar agentes da empresa
Atualizar status de disponibilidade
Ver conversas atribuídas
Métricas (tempo médio, satisfação, etc.)

5. Analytics Store

Responsabilidade: Gerenciar dados de analytics e métricas.

Estado gerenciado:

Métricas gerais (total conversas, tempo médio, etc.)
Dados de gráficos
Filtros de período
Comparações temporais

Principais operações:

Buscar métricas por período
Gerar relatórios
Exportar dados
Comparar períodos

🎯 Configuração da Store

A store principal combina todos os reducers e configura middlewares:

Configuração Principal da Redux Storetypescript

🪝 Custom Hooks

Hooks tipados para melhor experiência de desenvolvimento:

Custom Hooks para Redux - Typed Selectors e Dispatchtypescript

💡 Uso em Componentes

Exemplo completo de como usar Redux em um componente:

Exemplo Completo - Componente React usando Reduxtypescript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

🔄 Async Thunks Avançados

Com tratamento de erro

Async Thunk com Tratamento de Errotypescript

Com progresso

Async Thunk com Callback de Progressotypescript

📊 DevTools

Redux DevTools está habilitado por padrão em desenvolvimento:

Provider da Redux Storetypescript

Recursos do DevTools:

Time-travel debugging
Inspeção de actions e estado
Replay de actions
Export/import de estado
Performance monitoring

🔗 Próximos Passos

Frontend Estrutura - Organização do projeto
Firebase Integration - Integração Firebase
Componentes - Biblioteca de componentes