Tags: ons ice object now stat select name Ack break
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 the page show the title and content through the status.
Let State ={title:{color:' Red ', Text:Title}, content:{color:' Blue ', Text:Content }}functionRendertitle () {Let title= Document.queryselector (' #title '); Title.style.background=State.title.color; Title.innerhtml=State.title.text;}functionrendercontent () {Let content= Document.queryselector (' #content '); Content.style.background=State.content.color; Content.innerhtml=State.content.text;}//Methods of renderingfunctionrender () {rendertitle (); Rendercontent ();} Render ();
There is a problem, the first state can not be global, and should not be any way to change directly, this is very dangerous, so you need to provide a way to change the state, when modifying this state to provide an object with type Dispath to modify the state.
//define what you need to do. (constants) MacrosConst Change_title_color = ' Change_title_color '; Const Change_content_text= ' Change_content_text ';={title:{color:' Red ', Text:Title}, content:{color:' Blue ', Text:Content }}//when it is distributed, a modified action is submitted.//parameter {type: ', payload}functionDispatch (Action) {//distribute the method, here to change the state Switch(action.type) { CaseCHANGE_TITLE_COLOR:state.title.color=Action.color; Break; CaseCHANGE_CONTENT_TEXT:state.content.text=Action.text; Break; default: Break; }}functionRendertitle () {Let title= Document.queryselector (' #title '); Title.style.background=State.title.color; Title.innerhtml=State.title.text;}functionrendercontent () {Let content= Document.queryselector (' #content '); Content.style.background=State.content.color; Content.innerhtml=State.content.text;}//Methods of renderingfunctionrender () {rendertitle (); Rendercontent ();} Render ();d Ispatch ({type:change_content_text,text:' Change it casually '.}); render ();
But this state can be transferred to outsiders, so there is the store inside the redux.
//define what you need to do. (constants) MacrosConst Change_title_color = ' Change_title_color '; Const Change_content_text= ' Change_content_text ';functionCreateStore () { let state={title:{color:' Red ', Text:Title}, content:{color:' Blue ', Text:Content}} let GetState= () + =State ; //when it is distributed, a modified action is submitted. //parameter {type: ', payload} functionDispatch (Action) {//distribute the method, here to change the state Switch(action.type) { CaseCHANGE_TITLE_COLOR:state.title.color=Action.color; Break; CaseCHANGE_CONTENT_TEXT:state.content.text=Action.text; Break; default: Break; } } //exposing the method to outside use return{Dispatch,getstate}}let Store=createstore ();functionRendertitle () {Let title= Document.queryselector (' #title '); Title.style.background=store.getstate (). Title.color; Title.innerhtml=store.getstate (). Title.text;}functionrendercontent () {Let content= Document.queryselector (' #content '); Content.style.background=store.getstate (). Content.color; Content.innerhtml=store.getstate (). Content.text;}//Methods of renderingfunctionrender () {rendertitle (); Rendercontent ();} Render (); Store.dispatch ({type:change_content_text,text:' Change it casually '.}); render ();
The redux of react