Mobx React - найкращі практики

У цій статті я хочу показати вам найкращі найкращі практики використання React з mobx. Я представлю їх як правила. Тому щоразу, коли ви стикаєтеся з конкретною проблемою, намагайтеся вирішити її, дотримуючись цих правил.

Ця стаття вимагає, щоб ви мали основне розуміння про магазини в mobx. Якщо ні, спочатку прочитайте це.

Потрібна швидка старт? Я створив проект для початківців, який реалізує рекомендовані практики. https://github.com/danielbischoff/react-mobx-starter

Магазини представляють стан штату

Завжди майте на увазі, що магазини відображають стан вашого додатка. Це означає, що коли ви зберігаєте стан своїх магазинів у файлі, закриваєте програму та перезапускаєте її із завантаженим станом, у вас з’явиться та сама програма, і ви побачите ті самі речі, як і раніше, ніж закрити програму. Магазини не мають бути "локальними базами даних". Вони також містять інформацію про те, яка кнопка видима, відключена, поточний текст поданого вводу тощо.

Розділіть дзвінки на відпочинок від магазинів

Не телефонуйте інтерфейсу для відпочинку з ваших магазинів. Це робить їх важкими для тестування. Замість цього переведіть ці дзвінки на відпочинок у додаткові класи та передайте ці екземпляри кожному магазину за допомогою конструктора магазину. Коли ви пишете тест, ви можете легко підробити ці дзвінки api та передати свій фальшивий екземпляр api в кожен магазин.

Зберігайте свою логіку бізнесу в магазинах

Ніколи не пишіть ділову логіку у своїх компонентах. Коли ви пишете свою бізнес-логіку в компонентах, у вас немає шансів повторно її використовувати, ваша логіка бізнесу поширюється на багато компонентів, що ускладнює переробку або повторне використання коду. Напишіть ділову логіку методами в магазинах і називайте ці методи зі своїх компонентів.

Не створюйте екземпляри глобальних магазинів

Ніколи не створюйте екземпляри глобальних магазинів. Ви не можете написати жодних розумних і надійних тестів для своїх компонентів. Замість цього скористайтеся Постачальником, щоб ввести свої магазини в реквізити компонентів. Тоді у своїх тестах ви можете легко знущатися над цими магазинами.

Лише магазину дозволено змінювати свої властивості

Ніколи не змінюйте властивість магазину безпосередньо в компоненті. Лише магазину дозволено змінювати власні властивості. Завжди телефонуйте методу з магазину, який змінює його властивість. Інакше стан ваших програм (магазини = стан додатків) оновлюється звідусіль, і ви повільно втрачаєте контроль. Це дуже важко налагоджує.

Завжди коментуйте кожен компонент за допомогою спостерігача @

Анотування кожного компонента за допомогою спостерігача @ дозволяє кожному компоненту оновлювати зміни в системі зберігання. Інакше батьківський компонент, позначений за допомогою компонента @, повинен повторно відображатись та оновлювати його дочірній компонент. Тому потрібно менше ремонтувати компоненти.

Використовуйте @ computed

Скажімо, ви хочете, щоб ваша кнопка була відключена, коли користувач не має ролі адміністратора і програма не перебуває в режимі "адміністратор". Однієї властивості, як isAdmin в одному магазині, для цього недостатньо. Вам знадобиться обчислена властивість у вашому магазині.

Можливо, вам не потрібен роутер реагування

Можливо, вам не потрібен роутер реагування. Як я вже говорив, перш ніж ви хочете, щоб ваші магазини представляли стан вашої програми. Якщо ви дозволите маршрутизатору реагувати на обробку частини вашої програми, ви не дозволяєте вашим магазинам представляти стан програми. Тому зберігайте поточний вигляд у власність в одному з ваших магазинів. Тоді у вас є один компонент, який просто відображає те, що говорить властивість.

Спробуйте віддати перевагу контрольованим компонентам над неконтрольованими компонентами

Завжди намагайтеся створити керовані компоненти. Це робить тестування компонентів та загальну складність ваших компонентів простою в експлуатації.

Я сподіваюся, що я міг би допомогти вам у виконанні цих простих порад.
Задавайте питання або дайте відгуки в коментарях нижче.