current position:Home>The team leader asked me to put all the states in redux

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

2022-01-27 00:44:36 Front end development

From the official account : The magician Carson

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 ReduxMobx Etc. state management library and ReactVue 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 ReactVue 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 .

A switch

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 .



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 .

--- EOF ---

recommend ↓↓↓

copyright notice
author[Front end development],Please bring the original link to reprint, thank you.

Random recommended