Translator: Will the world be all right

The original link

State management in React has long been a topic of discussion in the Javascript fraternity. I recently wanted to implement state management in one of my projects and wanted to do a little research before making a big decision.

Is it ** MobX or Redux? 支那

In this article, we will explore the benefits and trade-offs of both. How do you choose between any of them? This article assumes that you have basic knowledge of React state management.

Redux and MobX both work well with React.

Single store vs. multiple stores

Simply put, a Store is where you keep all your data.

Redux always has a large store where all the states are stored. MobX typically has multiple stores. Therefore, in MobX, you can logically separate your stores.

Also, in Redux, data is usually standardized. In MobX, you can keep de-normalized data.

Ordinary data vs observable data

Redux uses plain Javascript objects to store data. MobX, on the other hand, uses observables to store data.

Why is it so important?

You can listen to observable data and automatically track changes to the data. In Redux, you must manually track all updates.

Immutable versus variable (pure versus impure)

Redux uses immutable state. This means that the states are read-only and you cannot overwrite them directly. In Redux, the previous state is replaced by the new state. So Redux is pure, or it uses pure functions.

This comes in handy when you have to get back to where you were before. For example, the -undo operation.

In MobX, states can be overridden. You simply update the status with the new value. Therefore, MobX can be called not pure.

learning

MobX is easier to learn and has a steady learning curve. Especially since most traditional Javascript developers are familiar with OOP, MobX is easy to master. There’s a lot of abstraction in MobX, which makes it easier. You don’t have to worry about many things, or you must be careful. (e.g., subscription status)

Redux follows the functional programming paradigm. For Javascript developers without functional programming experience, Redux can be difficult to fully grasp directly. You’ll need to know about middleware like Redux Thunk, which makes the learning curve even steeper.

There are a lot of built-in abstractions in MobX, which leads to less code. But when implementing Redux, you end up writing a lot of boilerplate code.

debugging

Debugging becomes more difficult because there are more abstractions. MobX’s existing developer tools are average. The results can sometimes become unpredictable.

Redux, on the other hand, offers Kickass developer tools, including time travel. With pure functions and less abstraction, debugging in Redux will be a better experience than MobX. Following the flux paradigm makes Redux more predictable.

Scale and Maintenance

Redux is easier to maintain because of the whole purely functional thing and the functional programming paradigm. Redux can control everything.

Developer support

Redux’s developer community is ahead of the MobX community.

Ask yourself

1) Is the application small and simple?

Choose MobX

2) Like to build applications quickly?

Choose MobX

3) Are large teams looking for more maintainable code?

Choose Redux

4) Complex applications with extensible options

Choose Redux

Last and most important question. – Which one do you prefer? ?

Just choose which one.

Because: