one more time one more chance. Step one: MobX.

Mobx is a simple and useful JS library that can be used to manage state between React project components. Here are 7 tips from the field.



MobX: Simple, scalable state management

Tip#1 get the concept right

Most MobX concepts are easy to understand, and it helps to have a mental picture of MobX before diving into each one. The following four concepts are the cornerstones of Mobx:

  1. Observable: something that tracks changesdata
  2. Observer: Responds to Observable data updatescomponent
  3. Computed Values: Returns can be computed based on Observable data (the value here can also be understood as an Observable)function
  4. Reactions: Listens for different types of Observable data changes triggered to executefunction

Tip#2 make the right reactions

MobX offers a variety of Reactions for us to respond to data changes, each of which has its own characteristics and should be optimized for your business scenario.

  1. Autorun: Supplied functions are always fired once immediately, and again when the dependency changes. Dependencies refer to observable data that appears in autorun functions.
  2. autorunAsync: Same as autorun but you can specify how much time after it should run after the data changes in observables
  3. When: You can set the assertion so that when the assertion takes effect the response function will be executed and the response will only be fired once
  4. Reaction: Similar to Autorun, the function does not execute immediately

Name it Tip#3 for reactions

The benefit of naming These Reactions is that when something goes wrong, you can quickly locate it.

Tip#4 uses strict mode

By default, MobX allows you to update Observable data as much as you want. In large applications, random changes to data can make the state of the program untraceable and unpredictable.

To do this, MobX provides a strict mode that forces us to update Observable data only in the Action.

Tip#5 uses decorators

We don’t have to use ES2015 to use MobX, but use modifiers if we can. Using modifiers makes our code much cleaner and makes it easier to tell which data is an Observable and which is not.

The article also recommends using TypeScript, but I won’t go there.

Tip#6 uses multiple stores

Logical grouping of observed data using multiple stores.

  1. One for UI state
  2. One or more are used for domain state

Tip# 7 Don ‘t use it

The text is too long. I don’t want to translate it. MobX is not necessary. React can handle some data management tasks on its own, but using it for the sake of use can lead to clutter. While MobX and Redux have their own pros and cons, Redux should also be considered appropriately.

reference

7 Tips for Using MobX

Translation, mixed with personal insights, please refer to the original.

Front-end learning QQ group: 538631558