標籤：ons ice 對象 現在 stat select name ack break
本文簡單的說下redux。
首先這有張網頁，裡面有文字和內容。
<!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>
現在讓這個網頁通過狀態來顯示標題和內容。
let state = { title:{ color:‘red‘, text:‘標題‘ }, content:{ color:‘blue‘, text:‘內容‘ }}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;}//渲染的方法function render(){ renderTitle(); renderContent();}render();
這有個問題，首先狀態不能是全域的，也不應該哪個方法都可以直接更改，這樣做很危險，所以需要提供一個更改狀態的方法，修改這狀態的時候提供一個對象帶有type類型的dispath來修改狀態。
//先定義好需要幹那些事情（常量）宏const CHANGE_TITLE_COLOR = ‘CHANGE_TITLE_COLOR‘;const CHANGE_CONTENT_TEXT = ‘CHANGE_CONTENT_TEXT‘;let state = { title:{ color:‘red‘, text:‘標題‘ }, content:{ color:‘blue‘, text:‘內容‘ }}//派發時一個將修改的動作提交過來//參數{type:‘‘,載荷}function dispatch(action){ //派發的方法，這裡要更改的狀態 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;}//渲染的方法function render(){ renderTitle(); renderContent();}render();dispatch({type:CHANGE_CONTENT_TEXT,text:‘隨便改的‘});render();
但是這麼寫state還是能被外人調到，所以就有了Redux裡面的store。
//先定義好需要幹那些事情（常量）宏const CHANGE_TITLE_COLOR = ‘CHANGE_TITLE_COLOR‘;const CHANGE_CONTENT_TEXT = ‘CHANGE_CONTENT_TEXT‘;function createStore(){ let state = { title:{ color:‘red‘, text:‘標題‘ }, content:{ color:‘blue‘, text:‘內容‘ } } let getState = () => state; //派發時一個將修改的動作提交過來 //參數{type:‘‘,載荷} function dispatch(action){ //派發的方法，這裡要更改的狀態 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; } } //將方法暴露給外面使用 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;}//渲染的方法function render(){ renderTitle(); renderContent();}render();store.dispatch({type:CHANGE_CONTENT_TEXT,text:‘隨便改的‘});render();
React之Redux
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
