Czy MobX to dobra alternatywa dla Redux?

Czy MobX to dobra alternatywa dla Redux?

‍

Coraz częściej w nowych projektach w miejscu króla state managementu jakim jest niewątpliwie Redux pojawia się MobX. Zdaniem wielu oferuje on bardziej czytelny oraz korzystniejszy pod względem wydajności sposób na zarządzanie stanem aplikacji.

‍

‍

Czym jest Redux?

‍

Redux jest to biblioteka do zarządzania stanem aplikacji. Jest implementacją architektury Flux stworzoną przez Meta (wcześniej Facebook). Głównym założeniem jest stworzenie “Single Source Of Truth” w postaci jednego store. Store zbudowany jest z reducera, czyli funkcji która pod wpływem akcji pochodzących z dispatchera - zwraca zmieniony stan. Reducer powinien spełniać założenia “pure function” czyli przy określonym stanie wejścia otrzymujemy zawsze ten sam rezultat na wyjściu. Wcześniej wspomniane akcje są najczęściej obiektami zawierającymi w sobie informacje potrzebne by wywołać określoną zmianę. Dispatcher jest funkcją która przekazuje akcję do reducera. Jeśli chcemy korzystać ze store w aplikacji React, potrzebujemy dodatkowej biblioteki react-redux pełniącą rolę konektora który pozwala nam na komunikowanie się z Redux. Na ogół opakowuje się aplikację providerem do którego przekazywany jest store, natomiast komponenty komunikują się za pośrednictwem hooków jak useSelector i useDispatch, bądź za pomocą HOC (higher-order component) connect.

‍

Czym jest MobX?

‍

MobX jest to biblioteka do zarządzania stanem aplikacji. Oparta jest na dekoratorach które dodają obiektom dodatkowe funkcjonalności przekształcając je w obserwowalny stan. Budowa store nie jest nad wyraz skomplikowana. Składa się z JS-owej klasy (ale niekoniecznie) w której określamy pola oraz metody które dekorujemy w konstruktorze za pomocą makeObservable bądź makeAutoObservable. Do powszechnie używanych dekoratorów należą observable, computed oraz action. Observable przekształca pole obiektu w wartość która pozwala bibliotece informować o zmianach stanu. Computed w odróżnieniu od observable używa się dla wartości które są wyliczane na podstawie aktualnego stanu. Action jest dekoratorem który informuje bibliotekę że dana metoda służy do zmiany stanu. Komunikacja w aplikacjach React odbywa się za pomocą wywoływania metod oraz wyciągania wartości pól. Store przekazuje się do komponentów za pomocą contextu. Aby komponenty wykrywały zmiany stanu należy je opakować funkcją observer pochodzącą z dodatkowej biblioteki mobx-react-lite.

‍

Czytelność

‍

Redux z powodu bardziej skomplikowanej struktury, może sprawiać trudności związane z określeniem co właściwie się dzieje w kodzie - zwłaszcza osobom które mają pierwszy raz z nim styczność. Założenie Reduxa gdzie mamy pojedynczy store utrudnia także zadanie kiedy chcemy jasno rozdzielić jego poszczególne części na domeny. MobX pozwala na tworzenie wielu instancji które niekoniecznie muszą opakowywać całą aplikację. Komunikacja oraz budowa stora jest oparta o mechanizmy które wydają się naturalne dla osób znających JavaScript. Sytuacja wygląda jeszcze lepiej w przypadku użycia TypeScript ponieważ dużo kodu można uprościć do dekoratorów ze składni TS’a.

‍

Wydajność

‍

Według benchmarku który został zamieszczony na twitterze w większości przypadków MobX jest w stanie pochwalić się lepszymi wynikami od Redux. Sprawdź tutaj.

‍

‍

Co Redux ma na swoją obronę?

‍

Wielkim atutem Reduxa w tym zestawieniu jest fakt, że jest wciąż dużo bardziej popularnym rozwiązaniem, a co z tym idzie - wsparcie community. Jest też rozwiązaniem “battle-tested” oraz jest rozwijany przez topowych deweloperów wspieranych przez jednego z gigantów technologicznych jakim jest Meta.

‍

Czy MobX to w takim razie dobra alternatywa?

‍

Czy warto wobec tego postawić na MobX? To oczywiście zależy. Decyzja zawsze powinna wynikać z potrzeb projektu i zespołu który go realizuje. Wybranie mniej popularnej biblioteki zawsze niesie za sobą większe ryzyko napotkania problemów których jeszcze nikt nie rozwiązał. Natomiast mniejsze skomplikowanie pozwala na uniknięcie większości problemów. Zdecydowanie trudniej jest niepoprawnie zaprojektować store oparty o MobX niż w przypadku Redux.