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 .
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
Mobx Etc. state management library and
Vue The relationship between isovisual Libraries , Hope to solve the above confusion .
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
Interaction The relationship between .
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 .
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 」）.
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
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
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 .
author[Front end development],Please bring the original link to reprint, thank you.
The sidebar is recommended
- Spring IOC container loading process
- [thinking] the difference between singleton mode and static method - object-oriented programming
- Hadoop environment setup (MySQL environment configuration)
- 10 minutes, using node JS creates a real-time early warning system for bad weather!
- Git tool
- Force deduction algorithm - 92 Reverse linked list II
- What is the sub problem of dynamic programming?
- C / C + +: static keyword summary
- Idea does not have the artifacts option when configuring Tomcat
- Anaconda can't open it
guess what you like
I don't know how to start this
Matlab simulation of transportation optimization algorithm based on PSO
MySQL slow log optimization
[Vue] as the window is stretched (larger, smaller, wider and higher), the text will not be displayed
Popular Linux distributions for embedded computing
Suzhou computer research
After installing SSL Certificate in Windows + tomcat, the domain name request is not successful. Please answer!!
Implementation time output and greetings of jQuery instance
The 72 year old uncle became popular. Wu Jing and Guo fan made his story into a film, which made countless dreamers blush
How to save computer research
- Springboot implements excel import and export, which is easy to use, and poi can be thrown away
- The final examination subjects of a class are mathematical programming, and the scores are sorted and output from high to low
- Two pronged approach, Tsinghua Professor Pro code JDK and hotspot source code notes, one-time learning to understand
- C + + recursive knapsack problem
- The use of GIT and GitHub and the latest git tutorial are easy to understand -- Video notes of crazy God speaking
- PostgreSQL statement query
- Ignition database test
- Context didn't understand why he got a high salary?, Nginxfair principle
- Bootstrap switch switch control user's guide, springcloud actual combat video
- A list that contains only strings. What other search methods can be used except sequential search
- [matlab path planning] multi ant colony algorithm grid map path planning [including GUI source code 650]
- [matlab path planning] improved genetic algorithm grid map path planning [including source code phase 525]
- Iinternet network path management system
- Appium settings app is not running after 5000ms
- Reactnative foundation - 07 (background image, status bar, statusbar)
- Reactnative foundation - 04 (custom rpx)
- If you want an embedded database (H2, hsql or Derby), please put it on the classpath
- When using stm32g070 Hal library, if you want to write to flash, you must perform an erase. If you don't let it, you can't write continuously.
- Linux checks where the software is installed and what files are installed
- SQL statement fuzzy query and time interval filtering
- 69. Sqrt (x) (c + + problem solving version with vs runnable source program)
- Fresh students are about to graduate. Do you choose Java development or big data?
- Java project: OA management system (java + SSM + bootstrap + MySQL + JSP)
- Titanic passenger survival prediction
- Vectorization of deep learning formula
- Configuration and use of private image warehouse of microservice architect docker
- For someone, delete return 1 and return 0
- How does Java dynamically obtain what type of data is passed? It is used to judge whether the data is the same, dynamic data type
- How does the database cow optimize SQL?
- [data structure] chain structure of binary tree (pre order traversal) (middle order traversal) (post order traversal) (sequence traversal)
- Webpack packaging optimization solution
- 5. Operation element
- Detailed explanation of red and black trees
- redhat7. 9 install database 19C
- Blue Bridge Cup notes: (the given elements are not repeated) complete arrangement (arrangement cannot be repeated, arrangement can be repeated)
- Detailed explanation of springboot default package scanning mechanism and @ componentscan specified scanning path
- How to solve the run-time exception of test times
- Detailed explanation of k8s management tool kubectl
- Android system view memory command