Is MobX a good alternative to Redux?

Is MobX a good alternative to Redux?

More and more often, in new projects, MobX appears in place of the king of state management, which is undoubtedly Redux. According to many, it offers a clearer and more efficient way to manage the application state.

Redux logo

What is Redux?

Redux is a library for managing the application state. It is an implementation of Flux architecture created by Meta (former Facebook). The main idea is to create "Single Source Of Truth" as a single store. The store is built from a reducer, which is a function that returns a changed state under the influence of dispatcher actions.

Reducer should meet the assumptions of "pure function", which means that for a given input state, we always get the same result on the output. The previously mentioned actions are usually objects containing information needed to cause a specific change. Dispatcher is a function that passes the action to a reducer.

If we want to use store in React application, we need an additional react-redux library as a connector that allows us to communicate with Redux. Usually, we wrap the application with a provider to which the store is passed, and components communicate via hooks like useSelector and useDispatch, or HOC (higher-order component) connect.

Mobx logo

What is MobX?

MobX is a library for managing an application’s state. It is based on decorators that add additional functionality to objects by transforming them into observable state. The construction of the store is not overly complicated. It consists of a JS class (but not necessarily) in which we define the fields and methods that we decorate in the constructor with makeObservable or makeAutoObservable.

Common decorators include observable, computed, and action. Observable transforms an object field into a value that allows the library to report changes in state. Computed, as opposed to observable, is used for values that are calculated from the current state. Action is a decorator that informs the library that a particular method is used to change the state. Communication in React applications is done by calling methods and accessing fields. Store is passed to components through context.

In order for components to detect state changes, they need to be wrapped with an observer function from the additional library mobx-react-lite.


Readability

Because of its more complicated structure, Redux can be difficult to figure out what's actually going on in the code - especially for first-time users. Setting up Redux where we have a single store also makes it difficult when we want to clearly separate its various parts into domains. MobX allows you to create multiple instances which do not necessarily have to wrap the entire application. Communication and store structure is based on mechanisms that seem natural to people familiar with JavaScript. The situation looks even better when using TypeScript because a lot of code can be simplified into decorators from TS syntax.


Performance

According to a benchmark that was posted on Twitter in most cases MobX is able to boast better results than Redux. Check here

MobX vs Redux

What does Redux have in its defense?

The great thing about Redux in this comparision is that it is still a much more popular solution, and with that comes community support. It is also a battle-tested solution and is developed by top developers backed by one of the tech giants that is Meta.


Is MobX a good alternative then?

Is it worth betting on MobX, then? It depends, of course. The decision should always be based on the needs of the project and the team that implements it. Choosing a less popular library always carries a higher risk of encountering problems that no one has yet solved. On the other hand, lower complexity allows you to avoid most problems. It is definitely more difficult to incorrectly design a store based on MobX than it is with Redux.

click here to go to the contact form
Content

Got a project?

Let's talk!

__wf_zastrzeżone_dziedziczyć
Technologies
Technologies
HTML - co to?
arrow icon
3.20.2024
2 min czytania
Technologies
What is HTML?
arrow icon
3.21.2024
2 min read
Technologies
Technologies
TypeScript? - co to?
arrow icon
3.20.2024
3 min czytania
Technologies
What is TypeScript?
arrow icon
3.20.2024
3 min read
Technologies
Technologies
PHP - co to?
arrow icon
3.19.2024
1 min czytania
Technologies
What is PHP?
arrow icon
3.19.2024
1 min read
Technologies
Technologies
Swift - co to?
arrow icon
3.18.2024
5 min czytania
Technologies
What is Swift?
arrow icon
3.18.2024
5 min read
Technologies
Technologies
Kotlin - co to?
arrow icon
3.16.2024
4 min czytania
Technologies
What is Kotlin?
arrow icon
3.16.2024
4 min read
Technologies
Technologies
Vue.js - co to?
arrow icon
3.15.2024
3 min czytania
Technologies
Technologies
What is Vue.js?
arrow icon
3.15.2024
3 min read
Technologies
Technologies
JAVA - Co to?
arrow icon
3.14.2024
4 min czytania
Technologies
What is JAVA?
arrow icon
3.13.2024
2 min read
Technologies
Technologies
React Native - co to?
arrow icon
3.13.2024
3 min czytania
Technologies
What is React Native?
arrow icon
3.13.2024
3 min read
Technologies
Technologies
React.js - co to?
arrow icon
3.13.2024
2 min czytania
Technologies
What is React.js?
arrow icon
3.13.2024
2 min read
Technologies
Node.js - co to?
arrow icon
3.13.2024
1 min czytania
Technologies
What is Node.js?
arrow icon
3.13.2024
1 min read
Technologies
Technologies
JavaScript - co to?
arrow icon
3.13.2024
1 min czytania
Technologies
What is JavaScript?
arrow icon
3.13.2024
1 min read
Knowledge hub
Knowledge hub
Kim jest fullstack developer?
arrow icon
3.13.2024
1 min czytania
Knowledge hub
What is a fullstack developer?
arrow icon
3.13.2024
1 min read
Knowledge hub
Knowledge hub
Co to jest frontend?
arrow icon
3.13.2024
2 min czytania
Knowledge hub
What is frontend?
arrow icon
3.13.2024
2 min read
Knowledge hub
Knowledge hub
Co to jest backend?
arrow icon
3.13.2024
2 min czytania
Knowledge hub
What is backend?
arrow icon
3.13.2024
2 min read
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
Code
Code
Czy MobX to dobra alternatywa dla Redux?
arrow icon
2.1.2023
3 min czytania
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