1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
function renderApp(newAppState, oldAppState = {}) { if (newAppState === oldAppState) return console.log('app') renderTitle(newAppState.title,oldAppState.title) renderContent(newAppState.content,oldAppState.content) } function renderTitle(newTitle, oldTitle = {}){ if (newTitle === oldTitle) return console.log('title') const titleDOM = document.getElementById('title') titleDOM.innerHTML = newTitle.text titleDOM.style.color= newTitle.color } function renderContent(newContent, oldContent = {}){ console.log(newContent,oldContent) if (newContent === oldContent) return console.log('content') const contentDOM = document.getElementById('content') contentDOM.innerHTML = newContent.text contentDOM.style.color= newContent.color } function stateChanger(state,action){ if(!state){ return { title: { text: 'React.js 小书', color: 'red', }, content: { text: 'React.js 小书内容', color: 'blue' } } } switch (action.type) { case 'UPDATE_TITLE_TEXT': return { ... state, title:{ ...state.title, text:action.text } } break case 'UPDATE_TITLE_COLOR': return { ... state, title:{ ...state.title, color:action.color } } break default: return state } } function createStore(reducer){ let state = null const listeners =[] const subscribe = (listener)=>listeners.push(listener) const getState = ()=>state const dispatch = (action)=>{ state = reducer(state,action) listeners.forEach(listener=>listener()) } dispatch({}) // init state return {getState,dispatch,subscribe} } const store = createStore(stateChanger) let oldState = store.getState() store.subscribe(()=>{ const newState = store.getState() renderApp(newState,oldState) oldState = newState }) renderApp(store.getState()) store.dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小书》' }) // 修改标题文本 store.dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改标题颜色 |