Mobx React - най-добри практики

В тази статия искам да ви покажа общи най-добри практики за използване на React с mobx. Ще ги представя като правила. Затова винаги, когато стигнете до конкретен проблем, опитайте се да го разрешите, като се придържате към тези правила.

Тази статия изисква да имате основно разбиране за магазините в mobx. Ако не, първо прочетете това.

Нуждаете се от бърз старт? Създадох стартов проект, който прилага препоръчителните практики. https://github.com/danielbischoff/react-mobx-starter

Магазините представляват ui състояние

Винаги имайте предвид, че магазините представляват потребителското състояние на приложението ви. Това означава, че когато запишете състоянието на магазините си във файл, затворите програмата и я рестартирате с заредено състояние, ще имате същата програма и ще видите същите неща, както сте виждали преди да затворите програмата. Магазините не се означават като „локални бази данни“. Те също съдържат информация за това кой бутон е видим, забранен, текущият текст на подаден вход и др.

Отделете вашите разговори за почивка от магазините

Не се обаждайте на вашия интерфейс за почивка от магазините си. Това ги прави трудни за тестване. Вместо това поставете тези обаждания за почивка в допълнителни класове и ги предайте на всеки магазин, използвайки конструктора на магазина. Когато пишете тест, можете лесно да фалшифицирате тези api обаждания и да предадете своя фалшив api екземпляр до всеки магазин.

Запазете своята бизнес логика в магазините

Никога не пишете бизнес логика във вашите компоненти. Когато пишете своята бизнес логика в компоненти, нямате шанс да я използвате повторно, вашата бизнес логика се разпространява в много компоненти, което затруднява рефакторирането или повторното използване на кода. Напишете бизнес логиката с методи в магазините и извикайте тези методи от вашите компоненти.

Не създавайте екземпляри в глобален магазин

Никога не създавайте екземпляри в глобален магазин. Не можете да напишете никакви разумни и надеждни тестове за вашите компоненти. Вместо това използвайте Доставчика, за да инжектирате вашите магазини в реквизита на вашите компоненти. Тогава във вашите тестове лесно можете да се подигравате с тези магазини.

Само магазинът има право да променя свойствата си

Никога не променяйте свойството на магазина директно в компонент. Само магазинът има право да променя собствените си свойства. Винаги се обаждайте от магазина метод, който променя свойството на магазина. В противен случай състоянието на вашите приложения (магазини = състояние на приложение) се актуализира отвсякъде и бавно губите контрол. Това прави много трудно да се отстрани грешката.

Винаги отбелязвайте всеки компонент с @ наблюдател

Анотирането на всеки компонент с наблюдател @ позволява на всеки компонент да се актуализира при промените в опората на магазина. В противен случай родителският компонент, отбелязан с @ компонент, трябва да се представи отново, за да се актуализира неговият дътен компонент. Така че трябва да се предават по-малко компоненти.

Използвайте @ изчислено

Да речем, че искате вашия бутон да бъде деактивиран, когато потребителят няма роля на администратор и приложението не е в „режим на администриране“. Едно свойство като isAdmin в един магазин не е достатъчно за това. Ще ви е необходима изчислена собственост във вашия магазин.

Вероятно нямате нужда от реагиращ рутер

Вероятно нямате нужда от реагиращ рутер. Както казах преди да искате магазините ви да представят състоянието на приложението ви. Когато оставите да реагира маршрутизаторът да обработва част от състоянието на приложението ви, не допускате магазините ви да представляват състоянието на приложението. Затова запазете текущия си показван изглед в имот в един от вашите магазини. Тогава имате един компонент, който просто прави това, което казва свойството.

Опитайте се да предпочитате контролирани компоненти пред неконтролирани компоненти

Винаги се опитвайте да изградите контролирани компоненти. Това прави тестовите компоненти и цялостната сложност на вашите компоненти лесни за работа.

Надявам се, че бих могъл да ви помогна с тези прости съвети.
Задайте въпроси или дайте отзиви в коментарите по-долу.