简易Redux实现

HTML模板如下

JavaScript代码如下

function renderApp(newAppState, oldAppState = {}) {
  if (JSON.stringify(oldAppState) === JSON.stringify(newAppState)) return;
  renderTitle(newAppState.title, oldAppState.title)
  renderContent(newAppState.content, oldAppState.content)
}

/**
 * 渲染应用标题
 * 如果标题没更新，则直接返回，避免重新渲染
 */
function renderTitle(newTitle, oldTitle) {
  if (oldTitle === newTitle) return
  const titleDOM = document.getElementById('title')
  titleDOM.innerHTML = newTitle.text
  titleDOM.style.color = newTitle.color
}

function renderContent(newContent, oldContent) {
  if (oldContent === newContent) return
  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: 'green'
      }
    }
  }
  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      return {
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case 'UPDATE_TITLE_COLOR':
      return {
        ...state,
        title: {
          ...state.title,
          color: action.color
        }
      }
    case 'UPDATE_CONTENT_TEXT':
      return {
        ...state,
        content: {
          ...state.title,
          text: action.text
        }
      }
    case 'UPDATE_CONTENT_COLOR':
      return {
        ...state,
        content: {
          ...state.title,
          color: action.color
        }
      }
    default:
      return state
  }
}

/**
 * 创建 dispatch,subscribe 和 getState
 */
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(n => n())
  }
  dispatch({})
  return {
    getState,
    dispatch,
    subscribe
  }
}

const store = createStore(stateChanger)
let oldState = store.getState()

renderApp(oldState)

store.subscribe(() => {
  const newState = store.getState()
  renderApp(newState, oldState)
  oldState = newState
})

setTimeout(()=>{
  store.dispatch({
    type: 'UPDATE_TITLE_TEXT',
    text: '哈哈哈'
  })
  store.dispatch({
    type: 'UPDATE_TITLE_COLOR',
    color: 'blue'
  })
}, 2000)

动手实现Redux