The team leader asked me to put all the state in Redux

Hi everyone, this is Kasong.

In our React advanced source code group, in addition to React , state management is the most frequently discussed topic.

The weird thing is that many group friends have said similar things:

His colleague/group leader/leader... let him put all state in Redux/Mobx...

They feel wrong and don't know how to refute it.

Today we talk Redux , Mobx and other state management libraries and React , Vue relationship between the visual and other library, hoping to solve more puzzles.

The core competitiveness of the product

If you meet a big leader in the elevator, he asks you:

Little x, what are you doing recently?

In just two minutes before the elevator reaches the floor, how do you describe the function you are developing to the big leader?

I think you will introduce the general logic of the function instead of the specific interaction logic of a certain button in the function, right?

You will talk about logic instead of interaction. Because logic is the most important.

Next, we use a short story to understand the relationship between logic and interaction.

The relationship between logic and interaction

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

The development process is actually to deal with the relationship between the state related to the field of file upload upload progress, error...).

This part of the state, we call the domain state .

After a logical development, based on your various state of the art write unit tests .

In order to quickly go online to verify whether the function is used by anyone, you directly release it as a CLI tool.

A few days later, after data verification, the function was found to be very popular. So you choose React as the view library and develop view interaction based on the previous logic.

During the development view interaction process, you need to deal with the view-related various state (such as loading display hidden, open and closed state...).

This part of the state, we call the view state .

It can be seen that a fully functional product includes domain state and view state . The former is required, the latter is optional.

View the status in the gallery

React talk back to the view libraries such as 060f92c937d58c and Vue

Since most view libraries use component as the module boundary, it is natural that the domain state and view state are divided into different components, but the way they are divided is completely different.

For example, a complete application can be divided into many components:

Looking at these components from the view state

Comparing the two pictures above and below, component 1 (yellow and green) has the same size, which means that this is a pure component (such as a switch) with self-consistent interaction logic, and its interaction logic does not depend on other components.

In addition to component 1, more components need to be complementary in size with other components, which means their interaction logic affects each other.

For example, the length and width of component 5 are affected by component 2, component 6, and component 8. It may mean that component 5 is a prompt box, and whether it pops up is affected by 2, 6, or 8.

Let's domain state (the blue part):

The logic of the entire application is scattered in different components. There may didMount callback of component 1, and part of the logic in the useEffect callback of component 3.

Since component 5 is a prompt box with only prompt effects, it does not contain the logic necessary for the operation of the application (that is, the domain state ).

When to use state management

Back to the beginning, what kind of state (state) should be placed in the state management?

For view state :

• Self-consistent components manage their own state (such as component 1)
• Components whose states affect each other (such as 5 and 2, 6, 8) are determined according to the complexity of the application and the span between components

If the component span is relatively close (such as a sibling relationship), the public state can be promoted to the common parent component.

If the component span is far and the application is not complicated, it can be upgraded to the common Context .

If the application is complex, then consider the state management program.

For the domain state , because it is naturally distributed in the form of fragments in different components, so:

• Simple small applications can be distributed in components, or promoted to a common Context
• State management scheme is recommended for other situations

Even the sub-domains in the domain state can be abstracted and processed separately based on the state management solution

For example data service requested terminal this field state , which is more similar properties cache , in React can use SWR or React Query process.

to sum up

In this article, we talked about the classification of states- domain state and view state. There are different processing schemes for these two states according to their characteristics.

Although it is not impossible to hand over all the states to Redux processing, it will inevitably affect the readability, performance, and scalability of the project.

After studying this article, you can persuade colleagues/group leaders/leaders to be the best. If the other party insists on Redux , treat this kind of obsessive (han) and (han) people, remember the four-character proverb: