This article is simple redux.
First, there is a Web page with text and content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ReactDemo</title>
</head>
<body>
<div id="title"></div>
<div id="content"></div>
<div id="root"></div>
</body>
</html>
Now let this page display the title and content by status.
Let state = {
Title:{
Color: ‘red’,
Text: ‘title’
},
Content:{
Color:‘blue‘,
Text: ‘Content’
}
}
Function renderTitle(){
Let title = document.querySelector(‘#title‘);
Title.style.background = state.title.color;
title.innerHTML = state.title.text;
}
Function renderContent(){
Let content = document.querySelector(‘#content‘);
Content.style.background = state.content.color;
content.innerHTML = state.content.text;
}
//Rendering method
Function render(){
renderTitle();
renderContent();
}
Render();
This has a problem. First, the state cannot be global, and no method can be directly changed. This is dangerous. Therefore, you need to provide a method to change the state. When modifying this state, provide an object with a type of dispath. To modify the status.
/ / Define the need to do those things (constant) macro
Const CHANGE_TITLE_COLOR = ‘CHANGE_TITLE_COLOR’;
Const CHANGE_CONTENT_TEXT = ‘CHANGE_CONTENT_TEXT’;
Let state = {
Title:{
Color: ‘red’,
Text: ‘title’
},
Content:{
Color:‘blue‘,
Text: ‘Content’
}
}
//After dispatching, a modified action will be submitted.
//Parameter {type: ‘‘, load}
Function dispatch(action){ //Distributed method, the state to be changed here
Switch(action.type){
Case CHANGE_TITLE_COLOR:
State.title.color = action.color;
Break;
Case CHANGE_CONTENT_TEXT :
State.content.text = action.text;
Break;
Default:
Break;
}
}
Function renderTitle(){
Let title = document.querySelector(‘#title‘);
Title.style.background = state.title.color;
title.innerHTML = state.title.text;
}
Function renderContent(){
Let content = document.querySelector(‘#content‘);
Content.style.background = state.content.color;
content.innerHTML = state.content.text;
}
//Rendering method
Function render(){
renderTitle();
renderContent();
}
Render();
Dispatch({type:CHANGE_CONTENT_TEXT,text:‘casually changed ‘});
Render();
But writing the state can still be transferred by outsiders, so there is a store in Redux.
/ / Define the need to do those things (constant) macro
Const CHANGE_TITLE_COLOR = ‘CHANGE_TITLE_COLOR’;
Const CHANGE_CONTENT_TEXT = ‘CHANGE_CONTENT_TEXT’;
Function createStore(){
Let state = {
Title:{
Color: ‘red’,
Text: ‘title’
},
Content:{
Color:‘blue‘,
Text: ‘Content’
}
}
Let getState = () => state;
//After dispatching, a modified action will be submitted.
//Parameter {type: ‘‘, load}
Function dispatch(action){ //Distributed method, the state to be changed here
Switch(action.type){
Case CHANGE_TITLE_COLOR:
State.title.color = action.color;
Break;
Case CHANGE_CONTENT_TEXT :
State.content.text = action.text;
Break;
Default:
Break;
}
}
/ / Expose the method to the outside use
Return {dispatch,getState}
}
Let store = createStore();
Function renderTitle(){
Let title = document.querySelector(‘#title‘);
Title.style.background = store.getState().title.color;
title.innerHTML = store.getState().title.text;
}
Function renderContent(){
Let content = document.querySelector(‘#content‘);
Content.style.background = store.getState().content.color;
content.innerHTML = store.getState().content.text;
}
//Rendering method
Function render(){
renderTitle();
renderContent();
}
Render();
Store.dispatch({type:CHANGE_CONTENT_TEXT,text:‘just change ‘});
Render();Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
