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.

redux

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.

mobx

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.

redux vs mobx

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.


kliknij aby przejść do formularza
Content

Got a project?

Let's talk!

__wf_zastrzeżone_dziedziczyć
Business
Business
Profesjonalna aplikacja dla firmy - 10 wskazówek
arrow icon
5.12.2023
7 min czytania
Business
Business
Doradztwo IT - korzyści dla Twojej firmy
arrow icon
3.21.2023
6 mi czytania
IT
How to get started in IT?
arrow icon
3.6.2023
7 min read
IT
WEB3 - What is it? Introduction
arrow icon
2.21.2023
4 min read
UX/UI
UX/UI
UX Design - przewodnik dla programistów
arrow icon
1.30.2023
4 min czytania
Code
Code
Podstawy React’a - stan i hook useState
arrow icon
1.26.2023
5 min czytania
Startup
Startup
Startup - z jaką firmą IT współpracować?
arrow icon
12.20.2022
11 min czytania
Business
Business
Najlepszy kraj do outsourcingu IT
arrow icon
12.12.2022
4 min czytania
Business
Business
Jak zmienić firmę programistyczną?
arrow icon
12.2.2022
4 min czytania
Business
Business
Outsourcing IT- kompletny PRZEWODNIK!
arrow icon
11.28.2022
3 min czytania
Business
Business
Team Augmentation - Korzyści!
arrow icon
11.23.2022
9 min czytania
Business
Business
W co inwestować pieniądze w 2021 roku?
arrow icon
11.21.2022
3 min czytania
Business
Business
Praca w różnych strefach czasowych. Jak to działa?
arrow icon
11.18.2022
7 min czytania
Startup
Startup
Co to jest startup? (Nowoczesne Przedsiębiorstwo)
arrow icon
11.17.2022
6 min czytania
Business
Business
Co to jest outsourcing pracowników IT i ILE kosztuje
arrow icon
11.14.2022
5 min czytania
IT
IT
Jak stworzyć aplikację mobilną?
arrow icon
11.11.2022
5 min czytania
IT
IT
Jak testują programiści?
arrow icon
11.10.2022
2 min czytania
Code
Code
Rust to przyszłość Server Side
arrow icon
11.8.2022
1 min czytania
Code
Code
Dlaczego nie jestem fanem TypeScript
arrow icon
11.7.2022
3 min czytania
Business
Business
Jak wybrać firmę programistyczną? Czym się kierować?
arrow icon
11.6.2022
7 min czytania
UX/UI
UX Design - a guide for programmers
arrow icon
1.18.2023
4 min read
Business
Team Augmentation- Benefits!
arrow icon
1.4.2023
11 min read
Business
How to choose a programming company?
arrow icon
12.22.2022
8 min read
IT
How do programmers test?
arrow icon
12.18.2022
2 min read
IT
How to find good programmers?
arrow icon
12.15.2022
4 min read
Startup
What is a startup?
arrow icon
12.7.2022
7 min read
Code
Rust is the future of Server Side
arrow icon
12.1.2022
1 min read
IT
How to make a mobile app?
arrow icon
11.30.2022
5 min read
Business
How to work in various time zones?
arrow icon
11.27.2022
7 min read
We use cookies. By continuing to browse the site you are agreeing to our privacy policy.