The team leader asked me to put all the states in redux

Hello everyone , I'm Carson .

In us React Advanced source code group , except React Outside ,「 State management 」 Is the most frequently discussed topic .

It's weird , Several group friends said similar things ：

His colleagues / group leader / Leader ... Let him put all state All put in Redux/Mobx... in

They feel wrong , I don't know how to refute .

Let's talk today Redux、Mobx Etc. state management library and React、Vue The relationship between isovisual Libraries , Hope to solve the above confusion .

The core competitiveness of products

If you meet a big leader in the elevator , He asked you ：

Small x, What functions are you doing recently ？

Just before the elevator reaches the floor 2 minute , How do you describe the functions you are developing to the big leaders ？

I think you will introduce the general logic of the function , Instead of talking about the specific interaction logic of a button in the function ？

You can talk Logic , instead of Interaction . because Logic Is the most important .

Next, let's learn about... Through a little story Logic And Interaction The relationship between .

The relationship between logic and interaction

One day , The boss asked you to develop the file upload function .

The development process is actually dealing with 「 Upload files 」 Various related to this field 「 state 」 The relationship between （ such as Upload progress 、 Is it wrong ...）.

This part of the State , We call it 「 Domain status 」.

After logic development , You are based on various 「 Domain status 」 To write 「 unit testing 」.

In order to quickly go online, verify whether the function is used , You directly regard it as CLI Tool release .

A few days later , After data verification , Discovery is very popular . So you choose React As a view Library , Develop view interaction based on previous logic .

In the process of developing view interaction, we need to deal with various problems related to view 「 state 」（ such as loading Overt and covert 、 Open / close status ...）.

This part of the State , We call it 「 View state 」.

so , A fully functional product includes 「 Domain status 」 And 「 View state 」. The former is necessary , The latter is optional .

State in view Library

Back to React、Vue Such a view Library .

Because most view libraries are 「 Components 」 As a module boundary , So naturally ,「 Domain status 」 And 「 View state 」 Divided into different components , But the way they are divided is completely different .

for instance , A complete application can be divided into many components ：

from 「 View state 」 From a point of view, these components ：

Compare the upper and lower pictures , Components 1（ Yellow and green ） Same size , It means that this is a pure component with interactive logic and self consistency （ Like a switch ）, His interaction logic does not depend on other components .

Apart from the components 1, More components need to form complementary sizes with other components , This means that their interaction logic affects each other .

Like components 5 The length and width are affected by the component 2、 Components 6、 Components 8 influence , May represent ： Components 5 It's a prompt box , Does he pop up 2、6、8 influence .

Let's go from 「 Domain status 」（ The blue part ） From a point of view, these components ：

The logic of the whole application is scattered in different components , Possible components 1 Of didMount There is some logic in the callback , Components 3 Of useEffect There is some logic in the callback .

Due to component 5 It's a prompt box , Only hint effect , Therefore, it does not contain the logic necessary for the operation of the application （ namely 「 Domain status 」）.

When to use state management

Back to the beginning , Like what? state（ state ） It should be in state management ？

about 「 View state 」：

• The state self consistent component manages the state itself （ Such as components 1）

• Components whose states affect each other （ Such as 5 And 2、6、8） According to the application complexity 、 The span between components determines

If the component span is close （ If it's brotherhood ）, Then the public state can be promoted to the common parent component .

If the component span is long and the application is not complex , Can be promoted to a common Context in .

If the application is complex , Then consider the state management scheme .

about 「 Domain status 」, Because it is naturally distributed in different components in the form of fragments , therefore ：

• Simple small applications can be distributed in components , Or promote to a common Context in

• The state management scheme is recommended for other situations

even to the extent that , about 「 Domain status 」 Sub domains in , There can be 「 State management plan 」 And then abstract it out and deal with it separately .

For example, for 「 The data requested by the server 」 this 「 Domain status 」, Its nature is more similar to 「 cache 」, stay React Can be used in SWR or React Query Handle .

summary

In this article, we talked about the classification of States ——  Domain status And View state , There are different processing schemes for these two states according to their characteristics .

Although one brain gives all States to Redux It's not impossible to deal with , But it is bound to affect the readability of the project 、 performance 、 Scalability impact .

After learning this article, you can convince your colleagues / group leader / Best leadership .