Estado do Frontend
Processo
- Classifique cada valor: dados duráveis do servidor, estado de navegação/URL compartilhável, rascunho de formulário ou estado temporário de apresentação. Escolha um único proprietário autoritário.
- Reutilize as ferramentas de estado e busca de dados instaladas. Mantenha o estado local perto de seus consumidores; introduza estado compartilhado apenas para uma necessidade concreta de coordenação.
- Armazene em cache as chaves do servidor por todas as dimensões de consulta e autorização. Limpe ou isole o cache ao fazer logout, trocar de locatário (tenant) e mudar de identidade.
- Modele explicitamente os estados de carregamento, vazio, erro e sucesso. Para requisições concorrentes, o cancelamento pode reduzir trabalho, mas também proteja a aceitação do resultado para que uma resposta antiga não substitua uma intenção mais recente.
- Para mutações otimistas, reconcilie com o servidor e defina o comportamento de falha. Uma reversão não deve apagar uma mutação bem-sucedida mais recente; rastreie as operações ou use o padrão de concorrência suportado pela biblioteca.
- Verifique a navegação para frente/trás, repetições, mudanças rápidas de entrada, mutações com falha e troca de contas.
Exemplo
Pesquisar por A e depois por B retorna B primeiro e A depois. Os resultados exibidos permanecem B, e a URL reflete a pesquisa atual em vez da ordem de conclusão da resposta.
Condições de parada
Não substitua a biblioteca de estado para resolver uma corrida local. Duplicar o mesmo valor do servidor em stores globais independentes cria uma obrigação de sincronização.
Evidência
- Mapa de propriedade de estado e chaves de cache.
- Verificações de corrida/reversão/transição de sessão.
- Comportamento visível de carregamento e recuperação.
Referência
Fluxo de trabalho escrito de forma independente após revisar react-state-management.