redux源碼解析

此篇文章可做爲redux源碼導讀使用，只說明瞭其中部分核心代碼，並進行了一些簡化處理

用法回顧

1. 用createStore來建立store
2. 建立Action
3. 在Reducer中編寫純函數來處理Action
4. 用Store.dispatch()經過Action和Reducer來操做Store裏的數據
5. 用Store.subscribe()來監聽Store中的數據是否發生了變化
6. 用store.getState()來獲取Store中的state，並更新視圖

核心代碼

createStore(reducer, preloadedState, enhancer)

1.初始化數據

let currentReducer = reducer
  let currentState = preloadedState //存放state，preloadedState是傳入的默認值
  let currentListeners = [] //存放subscribe傳入的listener
  let nextListeners = currentListeners

2.建立dispatch, subscribe, getState等方法

dispatch(action)

1.執行reducer

currentReducer(currentState, action)

2.執行listener

const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

subscribe(listener)

nextListeners.push(listener)

getState()

return currentState

applyMiddleware(...middlewares)

const applyMiddleware = (...middlewares) => createStore => (...args) => {
        const compose = (...funcs) => {
          if (funcs.length === 0) return arg => arg
          if (funcs.length === 1) return funcs[0]
          return funcs.reduce((a, b) => (...args) => a(b(...args)))
        }
        const store = createStore(...args)
        let dispatch = () => {
          throw new Error(
            `Dispatching while constructing your middleware is not allowed. ` +
              `Other middleware would not be applied to this dispatch.`
          )
        }
        let chain = []
        const middlewareAPI = {
          getState: store.getState,
          dispatch: (...args) => dispatch(...args)
        }
        chain = middlewares.map(middleware => middleware(middlewareAPI)) //*1 middlewareAPI是store
        dispatch = compose(...chain)(store.dispatch) //*2 ...chain和store.dispatch是next
        return { ...store, dispatch } //*3 執行dispatch傳入action
    }

compose是函數式編程的用法用於簡化函數嵌套執行

咱們來看看middleware是怎麼寫的

const logger = store => next => action => {
      console.log('dispatching', action)
      let result = next(action)
      console.log('next state', store.getState())
      return result
    }

爲何會變成 store => next => action => ?

1. 第一個store是傳入的middlewareAPI
2. 第二個next是經過compose合成...middleware和store.dispatch實現中間件級聯
3. 第三個action是執行dispatch傳入的action

(見註釋)

更多文章 yjy5264.github.io