The redux of react
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
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.
What's Trending
- React child components to the parent component
- React Redux App Link
- Full stack scheme of speech recognition project based on react-native0.55.4
- Full stack scheme of speech recognition project based on react-native0.55.4
- React-redux Mapstatetoprops,mapdispatchtoprops How to use
- Comparison and compatibility of Vue and angular and react frame principles
- React-router3
- React life cycle
- Introduction of Baidu Map packaging error problem in react project
- The redux of react