Redux源碼解讀--(5)createStore

下面介紹最後一個函數,CreateStore.先上一個基本的用法吧。

const store = createStore(reducers, state, enhance);
這個enhance就是 applyMiddleware(...middleware),可以參見上一篇

下面上源碼吧。首先說一下,這麼多代碼其實首次執行的邏輯很簡單,大部分代碼都是定義了一個函數去等待調用的,真正就只是調用了一個默認的dispatch方法,初始化了一下下currentState.

export default function createStore(reducer, preloadedState, enhancer) {
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') { //第一步操作表明,可以不傳第二個參數,如果不傳則置爲undefined,將enhancer過渡到第三個參數
    enhancer = preloadedState
    preloadedState = undefined
  }

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {   //enhancer必須爲函數
      throw new Error('Expected the enhancer to be a function.')
    }

    return enhancer(createStore)(reducer, preloadedState)  //如果傳遞enhancer,則把createStore作爲參數傳遞過去,我在上一篇說過,第三個參數不傳也可以,因爲這裏根本就不會接收!applymiddleware中會將createStore執行並返回。
  }

  if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.')
  }

  let currentReducer = reducer
  let currentState = preloadedState   //當前的state
  let currentListeners = []     //當前的listeners
  let nextListeners = currentListeners
  let isDispatching = false   //是否正在分發

  function ensureCanMutateNextListeners() {    //具體這裏爲什麼會淺拷貝一個數組出來我也說不上來,有知道的麻煩幫忙解答一下
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()  //只是拷貝了一份
    }
  }

  function getState() {  //返回當前state
    return currentState
  }

  
  function subscribe(listener) {
    if (typeof listener !== 'function') {  //監聽器要是函數
      throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()  
    nextListeners.push(listener)

    return function unsubscribe() {  //返回一個函數用來解除監聽
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)    //從listeners中去除
    }
  }

  function dispatch(action) {
    if (!isPlainObject(action)) {   //action必須是個對象{type:'XXX'}
      throw new Error(
        'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {  //對象必須有type屬性(唯一確定一個action,不能重複)
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
      )
    }

    if (isDispatching) {   //不能同時執行兩個dispatch
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)    //不論第一次傳入currentState是否有值,都會根據第一次的reducer返回默認值
      //比如首次執行createStore就會傳入一個幾乎不會存在於reducer的case中的類型,這樣就可以返回第一次傳入reducer的默認值了。
    } finally {
      isDispatching = false   //放開dispatch入口
    }

    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()   //將監聽器執行一遍
    }

    return action
  }

  function replaceReducer(nextReducer) {
    if (typeof nextReducer !== 'function') {
      throw new Error('Expected the nextReducer to be a function.')
    }

    currentReducer = nextReducer  //更換當前的reducer,並且執行默認dispatch返回默認值。
    dispatch({ type: ActionTypes.INIT })
  }

//由於一個正規的reducer都會返回一個默認值,執行這一步(ActionTypes真的很少會被定義),爲了返回reducer的默認值。
  dispatch({ type: ActionTypes.INIT })

  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer
  }
}

大概源碼就這些,通過上一篇我們可以發現這個middleware是可以compose的,也就是說可以組合,來達到強化dispatch的目的。那麼是不是可以通過compose這個applymiddleware來做些什麼呢?

提升:

我們發現在createStore中並沒有直接說applymiddleware,而是使用了enhancer這個名詞,增強器。

那麼我就認爲applymiddleware其實是一個增強器,那肯定不止這一個嘍。比如:

const store = createStore(combineReducers({ routering: routerReducer }),
    {},
    composeEnhancers(  //這個函數也是一個類庫中引用的
        applyMiddleware(myTestMidware_delay, ...middleware,myTestMidware),
        myEhancer
    )
);
還是那個compose的套路,我傳遞的參數是createStore這個函數,他返回一個createStore函數,然後在下一個函數中把上一個傳入的createStore執行一下,這就是我們要做的。這裏增強的是createStore這個函數。

const myEhancer = (createstore)=> (reducer, preloadedState) => {
    const store = createstore(reducer, preloadedState);   //接收返回的store,並繼續增強。
    const dispatch = (action)=>{
        console.log('我是一個Enhancer,action爲:',action);
        return store.dispatch(action);
    }
    return {...store,dispatch};
}
由於createStore不止執行性的操作,所以這裏的return 不可以省略,每次返回的都是自己增強過的store。

通過增強器也可以達到增強dispatch的效果,所以能通過middleware實現的,都可以通過enhancer實現。

最後,誰知道那個ensureCanMutateNextListeners是幹嘛的啊,留言,thx.




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章