Как извадихме Redux за MobX

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

Безпроблемно изживяване е всичко.

Всичко.

И така, по пътя на влизането на React в нашата кодова база, ние се натъкнахме на най-предизвикателните битове за правене на разработване на фронталенд: управление на държавата.

О, момче ... бяхме ли за малко забавление.

Настройвам

Всичко започна просто: „мигрирайте заглавката на Skillshare до React.“

„Ах, лесен като пай“, смеехме да кажем - само изгледът „гост“ имаше само няколко връзки и просто поле за търсене. Без логика за удостоверяване, без управление на сесии, нищо магическо не се случва.

Добре, нека да влезем в някакъв код:

О, да, използваме TypeScript - той е най-чистият, интуитивен и дружелюбен за всички дяволи. Как да не го обичам? Ние също използваме Storybook за разработване на потребителски интерфейс, така че бихме искали да поддържаме компонентите възможно най-тъпи и да извършваме всякакви окабелявания на възможно най-високо ниво. Тъй като използваме Next за изобразяване от страна на сървъра, това ниво биха били компонентите на страницата, които в крайна сметка са просто обикновени компоненти, пребиваващи в определена папка със страници и автоматично преобразувани в заявки за URL адреси по време на изпълнение. Така че, ако имате файл home.tsx там, той ще бъде автоматично преобразуван в / началния маршрут - чао чао отива renderToString ().

Добре, това е за компонентите ... но чакайте! Работата на това поле за търсене също включваше създаването на стратегия за управление на държавата и обикновената местна държава нямаше да ни стигне много далеч.

Конфронтация: Редукс

В React, що се отнася до управлението на държавата, Redux е златният стандарт - има над 40 000 звезди в GitHub, има пълна поддръжка на TypeScript и големи момчета като Instagram го използват.

Ето как работи:

Изображение от @ abhayg772

За разлика от традиционните MVW модели, Redux управлява дърво на състоянието на приложение. UI събитията задействат действия, действията предават данни на редуктор, редукторът актуализира дървото на състоянието и в крайна сметка актуализациите на потребителския интерфейс.

Лесно, нали? Е, нека да направим това!

Субектът, участващ тук, се нарича „маркер“. Следователно, когато потребителят въведе в полето за търсене, той търси тагове.

Е, това беше лесно. Сега имаме нужда от помощници, за да създадем динамично нашите действия въз основа на входните параметри:

Там! Сега редукторът, който актуализира състоянието в зависимост от действието:

Уау, това беше доста къс код, но сега се търкаляме! Не забравяйте, че всички кабели продължават на най-високо ниво и това са компонентите на нашата страница.

И ние сме готови! Време е да си прашим ръцете и да вземем бира. Имаме нашите компоненти на потребителския интерфейс, прекрасна страница и всичко хубаво залепено.

Ъм ... чакай.

Това са само местни данни.

Все още трябва да извлечем неща от действителния API. Redux изисква действията да са чисти функции; те трябва да бъдат изпълними веднага. И какво не се изпълнява веднага? Асинхронизиране на операции като извличане на данни от API. Следователно Redux трябва да бъде сдвоена с други библиотеки, за да постигне това. Има много опции, като парчета, ефекти, бримки, саги и всяка от тях работи по различен начин. Това не означава само допълнителни градуси на наклона върху вече стръмната крива на обучение, но дори и повече котлони.

И докато вървехме по тези мътни води, очевидното отекваше отново и отново в главите ни: „целият този код само за обвързване на поле за търсене?“ И бяхме сигурни, че това ще бъдат същите думи, идващи от всеки, дръзнал достатъчно, за да се впусне в нашата кодова база.

Човек не може да diss Redux; той е пионерът в своята област и красива концепция навсякъде. Въпреки това открихме, че е твърде ниско ниво, което изисква да определите всичко. Непрекъснато се хвалят за това, че сте много уверени, като ви пречи да се стреляте в крака, като наложите модел, но цената на това е нечестиво количество котлони и плътна бариера за учене.

Това беше сделката за нас.

Как да кажем на нашия екип, че няма да се виждат със семействата си по време на празниците заради котлона?

Трябва да има нещо друго.

Нещо по-приятелски.

Резолюция: MobX

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

После се появиха някои диви мисли ...

„Ами ако изобщо не използвахме редукс?“

"Какво друго има там?"

Щракването върху бутона „Чувствам се късметлия“ даде отговор: MobX

MobX ви обещава едно нещо: просто да ви остави да вършите работата си. Той прилага принципите на реактивното програмиране към React компоненти - да, по ирония на съдбата, React не е реактивен извън кутията. За разлика от Redux, можете да имате няколко магазина (т.е. TagsStore, UsersStore и др.) Или root магазин и да ги свържете към компонентни реквизити. Той е там, за да ви помогне да управлявате състоянието си, но как ще го оформите зависи изцяло от вас.

Изображение на Hanno.co

Така че ние имаме React интеграция, пълна поддръжка на TypeScript и минимално ниво на котел.

Знаеш ли какво? Ще оставя кода да говори.

Започваме с дефинирането на нашия магазин:

След това прокарайте страницата:

И това е ... готово сте! Станахме и тичахме към същото място, на което бяхме в примера на Redux, само за няколко минути.

Така че кодът е съвсем сам по себе си, но за да се изясни, инжекционният помощник идва от интеграцията на MobX React; той е съответен на помощника за свързване на Redux, с изключение на това, че mapStateToProps и mapDispatchToProps са в една функция. Компонентът на доставчика, той също е MobX и отнема толкова магазини, колкото искате, които по-късно ще бъдат предадени на помощника за инжектиране. Също така погледнете тези красиви, красиви декоратори - така конфигурирате магазина си. Всяка собственост, украсена с @observable, ще уведоми свързаните компоненти, за да ги направи отново при промяна.

Това е, което аз наричам „интуитивен“.

Трябва ли да кажа повече?

Добре, като преминете към извличането на API, не забравяйте как Redux не се справя с асинхронизиращите действия извън кутията? Спомнете ли си как трябваше да използвате гръмотевици (които са трудни за тестване) или саги (които са трудни за разбиране), ако искате това? Е, с MobX имате обикновени стари класове, така че конструктор-инжектирайте вашата избрана библиотека и направете това в действията. Пропускате ли саги и генераторни функции?

Ето помощник на потока!

Помощникът на потока изпълнява функция на генератор, която дава стъпки - данни за реакции, регистриране на обаждания, грешки и т.н. Това е поредица от стъпки, които могат да се изпълняват постепенно или да се поставят на пауза, ако е необходимо.

Поток! Вземи го?

Времената за обяснение защо саги са наречени така са приключили. По дяволите, дори функциите на генератора изглеждат по-малко страшни.

отава

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

Ами ако искаме нещо като Redux, но толкова удобно като MobX?

Е, за това има MobX State Tree.

С MST ние дефинираме дървото на състоянието на приложението, като използваме специализиран API и е неизменна, като ви дава време за пътуване, сериализация и рехидратация и всичко останало, което можете да очаквате от уверена библиотека за управление на държавата.

Но достатъчно говори, имайте при вас!

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

По отношение на слона в стаята, единствената слаба точка е, че това е полуфункционален подход към MobX, което означава, че той изкопчава класове и декоратори, което означава, че поддръжката на TypeScript е най-доброто усилие.

Но дори и така, все още е доста страхотно!

Добре, като продължим, нека прокараме страницата:

Виж това? Свързването на компоненти остава същото, така че дори усилието за мигриране от ванилна MobX към MST е по-малко от писането на котел на Redux.

Защо не стигнахме чак до MST?

Е, MST беше излишен за нашия конкретен случай. Смятахме го, тъй като отстраняването на грешки във времето за пътуване е много хубаво да имаш, но след като се спънеш в Делорейн, това вече не е причина да се преместиш. Денят, в който имаме нужда от нещо, което MobX не може да предостави, може да дойде, но дори връщането към Redux не изглежда като обезсърчително благодарение на това колко ненатрапчив е MobX.

Като цяло, ние те обичаме, MobX.

Останете страхотни.

Още от мен

Наслаждавайте се да правите такива неща?

Тук в Skillshare се справяме с огромни предизвикателства, използвайки най-новите и най-добрите технологии - и ние го обичаме! Вие ли сте един от нас?

Какво правиш далеч от вкъщи?

Търсим служители!