The redux of react

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: