current position:Home>React study day 7
React study day 7
2021-08-27 08:54:44 【Zhou Shuai】
This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details :
Gengwen challenge
redux
redux Strictly in accordance with flux A framework for the realization of ideas , Realize a single data flow .
Part of the
redux It consists of four parts
action Message published by component
store Storage of messages
reducers Capture action, The way data is processed
view Component view
Communication process
A component release action
action adopt store By reducers Capture
reducers Process data according to the type of message
reducers Store new data in store in
store Pass the updated data to Another component
了
Be careful : In the course of communication , The data is used as state To store .
redux The three principles
Single data source
There can only be one... In the whole application store object .
state Is read-only
Data in the whole application state Is read-only , We can't modify . We can go through getState Method to get state, But whether in components , Still reducer in , We can't directly modify state, In components , We're going to release action To modify the state.
Functional programming
redux To make our development easier , It is suggested that we adopt functional programming , That is to say, every one reducer It's all a function , In the function , We update state data
Experience redux
redux At the beginning of the design , Not just for react It's time to design , Hope to be able to use... In various frameworks , Therefore, the core module is abstracted to be common , To use... In other frameworks , We need to install the corresponding plug-ins .
redux To be in es6 Used in development , So we need to install the module
npm install redux
redux The module provides some methods , For our use
redux Method
createStore Used to create store Of
Parameter is reducers Method
The return value is store object
effect : Store the name of the application state data
combineReducers Merge multiple reducers
for example : When using routing , By this method , Merge routed reducers
applyMiddleware Add Middleware
for example : In asynchrony action in , Add Middleware .
action
action Is a message object , Used to define the message type , And message data
Usually use type Indicates the message type ( The type is usually invariant , So it should be defined as a constant )
There is no limit on the data part attribute name , It can be arbitrary , for example data wait
reducers
For reception action And deal with , Similar to... In observer mode on Method , perhaps vuex Medium mutations.
stay redux in , Designed as a function
First parameter representation state object
The second parameter represents action object
Must have return value , It's updated state data
Be careful : If state Is data of reference type , Be sure to copy before returning .
That is to return a new state object .
When we are creating store When , In order to make state Have default values , It will be executed once by default reducer, So we can do it for state Define the default value and return
store object
dispatch Used to publish news ( Equivalent to... In observer mode trigger Method )
getState obtain state data
replaceReducer replace reducer
subscribe monitor state Changing
symbol symbol object
give an example :
// introduce redux
import { createStore } from 'redux';
// console.log(Redux);
// The message name is defined as a constant
const ADD = 'add';
const REMOVE = 'remove';
// Defining messages
let addNum = { type: ADD, num: 10 }
let removeNum = { type: REMOVE, num: 5 }
// Definition reduer
function reducer(state = 0, action) {
// console.log('reducer', state, action);
// analysis aciton type
switch (action.type) {
case ADD:
// Value type data , Can be modified directly
state += action.num;
break;
case REMOVE:
// Deal with messages that reduce numbers
state -= action.num;
break;
}
// Must have return value , It's new state
return state;
}
// establish store, Pass on reducer
let store = createStore(reducer);
// see store
console.log(store)
// monitor state change , Be sure to listen before execution
store.subscribe(res => console.log(store.getState()))
// destructor methods
let { dispatch } = store;
// Release action
// store.dispatch(addNum)
dispatch(addNum)
dispatch(addNum)
dispatch(addNum)
dispatch(removeNum)
Copy code
copyright notice
author[Zhou Shuai],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827085440784Q.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich