Camada de Funcionalidade (Feature Layer)

A Camada de Funcionalidade encapsula a lógica de negócio e o gerenciamento de dados de um domínio específico.

Exemplo Prático: TanStack Query e Sincronização de Estado

Imagine um cenário onde precisamos gerenciar uma lista de usuários que é compartilhada entre três componentes diferentes que não se conhecem.

1. O Data Hook (Coração da Feature)

Usamos o TanStack Query para garantir que todos os componentes usem a mesma instância de dados através de uma chave única (['users']).

// src/features/users/hooks/use-users-data.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { getUsersAction, updateUserStatusAction } from '../../../actions/user-actions';

export function useUsersData() {
  const queryClient = useQueryClient();

  // Busca a lista única de usuários
  const query = useQuery({
    queryKey: ['users'],
    queryFn: getUsersAction,
    staleTime: 1000 * 60 * 5, // 5 minutos
  });

  // Mutação para atualizar status (Ativo/Inativo)
  const mutation = useMutation({
    mutationFn: updateUserStatusAction,
    onSuccess: () => {
      // O segredo: invalida a query e propaga a atualização para todos os ouvintes
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });

  return {
    users: query.data ?? [],
    isLoading: query.isLoading,
    updateStatus: mutation.mutate,
  };
}

2. Componentes Consumidores (Desacoplados)

Embora os componentes abaixo estejam na Camada de Tela, a regra de filtragem e obtenção é provida pela Camada de Funcionalidade.

Componente A: Pacientes Ativos

// Parte de uma Screen ou Organismo
const ActiveUsersList = () => {
  const { users } = useUsersData();
  const activeUsers = users.filter(u => u.status === 'active');
  
  return <List data={activeUsers} />;
};

Componente B: Usuários Inativos

const InactiveUsersList = () => {
  const { users } = useUsersData();
  const inactiveUsers = users.filter(u => u.status === 'inactive');
  
  return <List data={inactiveUsers} />;
};

Componente C: Painel de Controle (Ações)

const UserControlPanel = ({ userId }) => {
  const { updateStatus } = useUsersData();
  
  return (
    <Button onPress={() => updateStatus({ id: userId, status: 'active' })}>
      Ativar Usuário
    </Button>
  );
};

Por que isso é Camada de Funcionalidade?

1. Compartilhamento Silencioso: Os componentes não precisam de props para se comunicar. Eles se sincronizam através da camada de dados.
2. Propagação Automática: Quando o Componente C executa a ação, a lista em A e B é atualizada automaticamente pelo TanStack Query.
3. Regra de Domínio: A lógica de que um usuário tem um status "active" ou "inactive" é uma regra de negócio (Feature).