Mobx React - Melhores práticas

Neste artigo, quero mostrar as práticas recomendadas comuns para o uso do React com o mobx. Vou apresentá-los como regras. Portanto, sempre que você encontrar um problema específico, tente resolvê-lo enquanto segue essas regras.

Este artigo requer que você tenha um entendimento básico de lojas no mobx. Caso contrário, leia isso primeiro.

Precisa de um início rápido? Criei um projeto inicial, que implementa as práticas recomendadas. https://github.com/danielbischoff/react-mobx-starter

As lojas representam o estado da interface do usuário

Lembre-se sempre de que as lojas representam o estado da interface do usuário do seu aplicativo. Isso significa que, quando você salvar o estado de suas lojas em um arquivo, feche seu programa e o reinicie com o estado carregado, você terá o mesmo programa e verá as mesmas coisas, como você viu antes de fechar seu programa. As lojas não devem ser "bancos de dados locais". Eles também contêm informações sobre qual botão está visível, desativado, o texto atual de uma entrada arquivada, etc.

Separe suas chamadas de descanso das lojas

Não chame sua interface de descanso de dentro de suas lojas. Isso os torna difíceis de testar. Em vez disso, coloque essas chamadas de descanso em classes extras e passe essas instâncias para cada loja usando o construtor da loja. Ao escrever o teste, você pode facilmente falsificar essas chamadas de API e passar sua instância de API falsa para cada loja.

Mantenha sua lógica de negócios nas lojas

Nunca escreva lógica de negócios em seus componentes. Quando você escreve sua lógica de negócios em componentes, não tem chance de reutilizá-la, sua lógica de negócios se espalha por muitos componentes, o que dificulta a refatoração ou reutilização do código. Escreva a lógica de negócios com métodos nas lojas e chame esses métodos a partir de seus componentes.

Não crie instâncias globais de loja

Nunca crie instâncias globais de loja. Você não pode escrever nenhum teste razoável e confiável para seus componentes. Em vez disso, use o Provedor para injetar suas lojas nos acessórios dos componentes. Em seus testes, você pode facilmente zombar dessas lojas.

Somente a loja tem permissão para alterar suas propriedades

Nunca altere a propriedade de uma loja diretamente em um componente. Somente a loja tem permissão para alterar suas próprias propriedades. Sempre chame um método da loja, que altere a propriedade da loja. Caso contrário, o estado do seu aplicativo (lojas = estado do aplicativo) é atualizado de qualquer lugar e você está perdendo o controle lentamente. Isso torna muito difícil depurar.

Sempre anote cada componente com @ observer

A anotação de cada componente com o @ observer permite que cada componente seja atualizado nas alterações de objetos da loja. Caso contrário, o componente pai anotado com o componente @ precisa ser renderizado novamente, para atualizar seu componente filho. Portanto, menos componentes precisam ser renderizados novamente.

Use @ computado

Digamos que você queira que seu botão seja desativado quando um usuário não tem a função de administrador e o aplicativo não está no "modo de administrador". Uma única propriedade como isAdmin em uma loja não é suficiente para isso. Você precisará de uma propriedade computada em sua loja.

Você provavelmente não precisa reagir ao roteador

Você provavelmente não precisa reagir ao roteador. Como eu disse antes, você deseja que suas lojas representem o estado do seu aplicativo. Quando você permite que o roteador de reação lide com parte do estado do aplicativo, suas lojas não representam o estado do aplicativo. Portanto, mantenha sua exibição atual exibida em uma propriedade em uma de suas lojas. Então você tem um componente que apenas renderiza o que a propriedade diz.

Tente favorecer componentes controlados em vez de componentes não controlados

Sempre tente criar componentes controlados. Isso facilita o manuseio dos componentes de teste e a complexidade geral de seus componentes.

Espero poder ajudá-lo com essas dicas simples.
Faça perguntas ou dê feedback nos comentários abaixo.