Mobx React - Best Practices

In dit artikel wil ik je veelvoorkomende best practices laten zien voor het gebruik van React met mobx. Ik zal ze presenteren als regels. Dus wanneer u een specifiek probleem tegenkomt, probeer het dan op te lossen terwijl u zich aan deze regels houdt.

Dit artikel vereist dat u een basiskennis heeft van winkels in mobx. Zo niet, lees dit dan eerst.

Quickstart nodig? Ik heb een startersproject gemaakt dat de aanbevolen werkwijzen implementeert. https://github.com/danielbischoff/react-mobx-starter

De winkels vertegenwoordigen de ui-status

Houd er altijd rekening mee dat de winkels de ui-staat van uw applicatie vertegenwoordigen. Dat betekent dat wanneer u de status van uw winkel opslaat in een bestand, uw programma sluit en opnieuw start met de geladen status, u hetzelfde programma hebt en dezelfde dingen ziet, zoals u hebt gezien voordat u uw programma sloot. Winkels zijn niet bedoeld als 'lokale databases'. Ze bevatten ook informatie over welke knop zichtbaar is, uitgeschakeld, de huidige tekst van een ingevoerde invoer, enz ..

Scheid uw rustgesprekken van de winkels

Noem uw rustinterface niet vanuit uw winkels. Dit maakt ze moeilijk te testen. Zet in plaats daarvan deze restoproepen in extra klassen en geef deze instanties door aan elke winkel met behulp van de constructor van de winkel. Wanneer u een test schrijft, kunt u deze api-oproepen gemakkelijk namaken en uw nep-api-exemplaar doorgeven aan elke winkel.

Bewaar uw bedrijfslogica in winkels

Schrijf nooit bedrijfslogica in uw componenten. Wanneer u uw bedrijfslogica in componenten schrijft, hebt u geen kans om deze opnieuw te gebruiken, uw bedrijfslogica raakt verspreid over vele componenten, wat het moeilijk maakt om de code te herformuleren of opnieuw te gebruiken. Schrijf de bedrijfslogica met methoden in de winkels en noem deze methoden vanuit uw componenten.

Maak geen wereldwijde winkelexemplaren

Maak nooit wereldwijde winkelinstanties. U kunt geen redelijke en betrouwbare tests voor uw componenten schrijven. Gebruik in plaats daarvan de provider om uw winkels in uw componenten-rekwisieten te injecteren. Vervolgens kunt u in uw tests eenvoudig deze winkels bespotten.

Alleen de winkel mag zijn eigenschappen wijzigen

Wijzig het eigendom van een winkel nooit rechtstreeks in een component. Alleen de winkel mag zijn eigen eigenschappen wijzigen. Roep altijd een methode uit de winkel aan die de eigenschap van de winkel verandert. Anders wordt uw applicatiestatus (winkels = applicatiestatus) overal bijgewerkt en verliest u langzaam de controle. Dat maakt het erg moeilijk om te debuggen.

Maak altijd aantekeningen bij elk onderdeel met @ observer

Door elke component te annoteren met @ observer, kan elke component worden bijgewerkt op wijzigingen in de winkelpropositie. Anders moet de bovenliggende component die is geannoteerd met @ component opnieuw worden geregistreerd om de onderliggende component bij te werken. Er hoeven dus minder componenten opnieuw te worden gerekend.

Gebruik @ berekend

Stel dat u uw knop wilt uitschakelen wanneer een gebruiker niet de beheerdersrol heeft en de toepassing niet in de 'beheerdersmodus' staat. Een enkele eigenschap zoals isAdmin in één winkel is hiervoor niet voldoende. U hebt een berekende eigenschap nodig in uw winkel.

Je hebt waarschijnlijk geen reactrouter nodig

Je hebt waarschijnlijk geen reactrouter nodig. Zoals ik al eerder zei, wilt u dat uw winkels de staat van uw applicatie vertegenwoordigen. Wanneer u de router een deel van uw applicatiestatus laat verwerken, laat uw winkels de applicatiestatus niet vertegenwoordigen. Bewaar dus uw huidige weergegeven weergave in een woning in een van uw winkels. Dan hebt u één component die alleen weergeeft wat de eigenschap zegt.

Probeer gecontroleerde componenten te verkiezen boven ongecontroleerde componenten

Probeer altijd gecontroleerde componenten te bouwen. Dit maakt het testen van componenten en de algehele complexiteit van uw componenten gemakkelijk te hanteren.

Ik hoop dat ik je kan helpen met deze eenvoudige tips.
Stel vragen of geef feedback in de reacties hieronder.