The problem of Redux: can react, mobx and realm solve it?

Time:2021-6-22

Original text:The Problems with Redux: Can React, MobX, and Realm save us?

By Erich Reich

First of all, I don’t hate redux. It is made up of aVery smart peopleDeveloped to ease the problem of managing state in single page applications. And it does solve the problem. You can use Redux to connect the state from the high-level store to each component, and only map the state that the component needs to use.

In this article, I’d like to share some of our experiences in creating mobile applications for our customers. In quantum mob, our main webapps are written by react, while our mobile technology stack is written by react native. React native allows most of the code to be shared between Android and IOS, and it makes it easier to reuse code from the web version of the product, because it is very similar to normal react.

Problems with Redux

There is no perfect tool for all scenes. Even if you like something, look at it clearly and objectively, especially those things that are hard to publicize. Do you use it just because it’s cool or because it’s the right choice? If a thing requires too much, its propaganda will not be of its own value.

Don’t doubt me, Dan AbramovAs an author, I wrote about his views on redux, trying to get people to stop and think about whether Redux really suits your project.

If you feel pressure when doing things in the “Redux way,” it means that you or your team may be overemphasizing it. This is just a tool in your toolbox, a crazy experiment.

-Dan Abramov

With the emergence of NPM, node and build tools (grunt, gulp, webpack…), the number of libraries and frameworks needed to be used in each project is growing explosively.

Do you need a processing date for your project? Why not use itMomentJs? Do you want to deal with arrays? Plus likelodashorRamda. If you don’t useBabelandAxiosAnd a good CSS framework, I can’t imagine what that will be like. You have to make sure to compile your homogeneous application, even if it’s just a hello world application.

Question 1: learning curve

Redux introduces some concepts that you need to spend time learning. You’ll need to go through the documentation and go through the tutorial, because it’s not just a simple call to save and then get the data.

Question 2: Configuration

To use Redux, you need to design a good store, create multiple reducers and combine them together. Then, use theconnectOr whatever, for each component that needs to interact with the storemapStateToPropsandmapDispatchToProps

Question 3: “best practices”

For each component, there is a file for JavaScript, one for styles, and one for JSX. Redux combines these things with action and reducer files, and the other integrates them all together. It’s really Redux, but what if you just want to use it somewhere? For a simple example, it’s over engineering to introduce powerful tools like redux.

alternative

Local state

Another alternative to Redux is to keep it simple and use the local state of the component. It means to keep the architecture simple at the beginning, and add Redux only when necessary. Is it easy?

Here’s howDanOne of themA good exampleTo show how to refactor a simple counter into a Redux style counter without using redux. Look at his article. It’s well written. He’s an authority on this topic.

MobX

Mobx is newer than redux. There must be a lot of discussion now. Mobx promises to provide all the functions of Redux, but with less sample code. This shortcoming is of course trivial, and it should not be expected to have the same level of control as redux.

How does mobx work? You can create the data model that you want to store as a class and use it@observableDecorators are added to where mobx manages, rather than focusing on the details of change and reduce.

Another thing is that your objects don’t have to be normalized like redux. This can be a good thing in some cases and a bad thing in others. For example, if you have a large array, you may encounter performance problems when searching for a value through it. You need to be aware of this.

If you want to learn more about mobx, you can start with this 4-minute video compared with redux.

Video on YouTube: understanding mobx vs Redux

If you like mobx’s official statement, check out their“Ten minutes introduction”. If you want to see a more objective view, here’s a developer using mobxExamples

Realm for react native

RealmIt’s another addition to react world, but currently it’s only available for react native. If you’re making a mobile app, it’s definitely worth seeing. In addition to storing and managing your domain data, realm also adds several data synchronized with the server, offline support and encryption functions.

To help understand the reasons for using realm, they came up with an example of a real world where you can start quickly. Mobile applications usually perform multiple searches to store data locally to avoid additional calls affecting performance and provide a better user experience.

Video on YouTube: Realm

You should think of realm as a database that is directly integrated into your application. It can provide good speed, because the object reference processed has the same reference as the database, and it is saved to the local storage, so any change or search will not be serialized or sent anywhere.

conclusion

No tool is perfect for every situation. It is not recommended to give up Redux completely. Redux is great, but with it comes the creation of additional boilerplate code. This will lead to an extended deadline and leave more code that we need to maintain.

It is appropriate to use local state on some components. If the complexity changes, Redux refactoring can be easily used.

Although mobx and realm are not designed as state containers, they can easily manage most of the data. It is highly recommended to try these two libraries to see if they are suitable for your project.

Recommended Today

What is “hybrid cloud”?

In this paper, we define the concept of “hybrid cloud”, explain four different cloud deployment models of hybrid cloud, and deeply analyze the industrial trend of hybrid cloud through a series of data and charts. 01 introduction Hybrid cloud is a computing environment that integrates multiple platforms and data centers. Generally speaking, hybrid cloud is […]