實現mini版redux

1. 理解redux模塊

1). redux模塊整體是一個對象模塊
2). 內部包含幾個函數
    createStore(reducers)  // reducers: function(state, action){ return newState}
    combineReducers(reducers)  // reducers: {reducer1, reducer2}  返回: function(state, action){ return newState}
    applyMiddleware()  // 暫不實現
3). store對象的功能
    getState()  // 返回當前state
    dispatch(action)  // 分發action: 調用reducers()得到新的總state, 執行所有已註冊的監聽函數
    subscibe(listener) // 訂閱監聽: 將監聽函數保存起來
    

2. 實現代碼: src/libs/redux/index.js

/*
創建store對象的函數
 */
export function createStore(reducer) {
  // 內部管理的state
  let state
  // 用來緩存監聽的數組容器
  const listeners = []
  // 初始調用reducer得到初始state值
  state = reducer(state, {type: '@@mini-redux/INIT'})

  /*
  獲取當前狀態
   */
  function getState() {
    return state
  }

  /*
  分發消息
   */
  function dispatch(action) {
    // 調用reducer, 得到新的state
    state = reducer(state, action)
    // 調用監聽緩存中的所有Listener, 通知狀態變化
    listeners.forEach(listener => listener())
  }

  /*
  訂閱監聽
   */
  function subscribe(listener) {
    // 將新的監聽添加到監聽緩存容器中
    listeners.push(listener)
  }

  // 向外暴露store對象
  return {getState, dispatch, subscribe}
}

/*
合併多個reducer的函數
 */
export const combineReducers = (reducers) => {
  // 返回一個reduer聲明函數
  return (state = {}, action) => {
    // 返回包含所有reducer狀態的總state對象
    return Object.keys(reducers).reduce((preState, key) => {
      // 調用對應的reducer函數得到對應的新state, 並保存到總state中
      preState[key] = reducers[key](state[key], action)
      return preState
    }, {})
  }
}

------------恢復內容結束------------