實現一個Redux（完善版）

時間 2020-05-15

標籤實現一個 redux 完善简体版

原文原文鏈接

上次咱們已經寫了實現一個迷你Redux（基礎版），此次咱們來繼續完善Redux，繼續上篇的例子續寫。javascript

中間件

Redux 有個 API 是 applyMiddleware，專門用來使用中間件的，首先咱們得知道，它用來幹嗎的。java

爲何會須要中間件？

假設咱們如今須要記錄每次的 dispatch 先後 state 的記錄，那要怎麼作呢？因而，簡單粗暴的在第一個 dispatch 方法先後加代碼react

console.log('prev state', store.getState())
console.log(action)
store.dispatch({ type: 'INCREMENT' })
console.log('next state', store.getState())
複製代碼

這部分運行結果：git

prev state {value: 10}
{type: "INCREMENT"}
當前數字爲：11
next state {value: 11}
複製代碼

但加完發現狀況不對，頁面有多個 dispatch 的話，要這樣寫不少次，會產生大量重複代碼。忽然，又要加需求了，須要記錄每次出錯的緣由,單獨的功能要求以下：github

try{
    store.dispatch(action)   
}catch(err){
    console.error('錯誤信息: ', err)  
}
複製代碼

而後兩個需求都要，那就湊合兩個，但疊一塊兒看更亂了。redux

中間件的概念

顯然，咱們不能經過這種方式來作。比較理想的方案是Redux自己提供一個功能入口，讓咱們能夠在外面添加功能進去，這樣代碼就不會複雜。數組

但若是給咱們現有實現的Redux添加功能，在哪一個環節添加比較合適呢？app

Reducer：純函數，只承擔計算 State 的功能，不合適承擔其餘功能，也承擔不了，由於理論上，純函數不能進行讀寫操做。
View：與 State 一一對應，能夠看做 State 的視覺層，也不合適承擔其餘功能。
Action：存放數據的對象，即消息的載體，只能被別人操做，本身不能進行任何操做。

咱們發現，以上需求都是和 dispatch 相關，只有發送 action 的這個步驟，即 store.dispatch() 方法，能夠添加功能。好比添加日誌功能，咱們只要把日誌放進 dispatch 函數裏，不就行了嗎，咱們只須要改造 dispatch 函數，把 dispatch 進行一層封裝。函數

const store = createStore(counter)
const next = store.dispatch
store.dispatch = (action) => {
    try{
        console.log('prev state', store.getState())
        console.log(action)
        next(action)   
        console.log('next state', store.getState())
    }catch(err){
        console.error('錯誤信息: ', err)  
    }
}
複製代碼

上面代碼，對 store.dispatch 進行了從新定義，這就是中間件的雛形。post

因此說Redux的中間件就是一個函數，是對 dispatch 方法的擴展，加強 dispatch 的功能。

實現中間件

對於上述 dispatch 的封裝，其實是缺陷很大的。萬一又來 n 多個需求怎麼辦? 那 dispatch 函數就混亂到沒法維護了，故須要擴展性強的多中間件合做模式。

咱們把 loggerMiddleware 提取出來

const store = createStore(counter)
const next = store.dispatch

const loggerMiddleware = (action) => {
  console.log('prev state', store.getState())
  console.log(action)
  next(action)
  console.log('next state', store.getState())
}

store.dispatch = (action) => {
  try {
    loggerMiddleware(action)
  } catch (err) {
    console.error('錯誤信息: ', err)
  }
}
複製代碼

把 exceptionMiddleware 提取出來

const exceptionMiddleware = (action) => {
  try {
    loggerMiddleware(action)
  } catch (err) {
    console.error('錯誤信息: ', err)
  }
}

store.dispatch = exceptionMiddleware
複製代碼

如今代碼有個問題，就是 exceptionMiddleware 中間件寫死 loggerMiddleware，但之後又萬一不要記錄功能呢，因此咱們須要讓 next(action) 變成動態的，即換哪一個中間件均可以

const exceptionMiddleware = (next) => (action) => {
  try {
    // loggerMiddleware(action)
    next(action)
  } catch (err) {
    console.error('錯誤信息: ', err)
  }
}
複製代碼

這個寫法可能剛開始看不太適應，實際就是函數裏面，返回一個函數，即等效於

const exceptionMiddleware = function (next) {
  return function (action) {
    try {
      // loggerMiddleware(action)
      next(action)
    } catch (err) {
      console.error('錯誤信息: ', err)
    }
  }
}
複製代碼

傳參數的時候便是exceptionMiddleware(next)(action)

同理，咱們讓 loggerMiddleware 裏面沒法擴展別的中間件了！咱們也把 next 寫成動態的

const loggerMiddleware = (next) => (action) => {
  console.log('prev state', store.getState())
  console.log(action)
  next(action)
  console.log('next state', store.getState())
}
複製代碼

目前爲止，整個中間件設計改造以下：

const store = createStore(counter)
const next = store.dispatch

const loggerMiddleware = (next) => (action) => {
  console.log('prev state', store.getState())
  console.log(action)
  next(action)
  console.log('next state', store.getState())
}

const exceptionMiddleware = (next) => (action) => {
  try {
    next(action)
  } catch (err) {
    console.error('錯誤信息: ', err)
  }
}

store.dispatch = exceptionMiddleware(loggerMiddleware(next))
複製代碼

如今又有一個新問題，想一想平時使用中間件是從外部引入的，那外部中間件裏面怎麼會有 store.getState() 這個方法，因而咱們把 store 也給獨立出去。

const store = createStore(counter)
const next = store.dispatch

const loggerMiddleware = (store) => (next) => (action) => {
  console.log('prev state', store.getState())
  console.log(action)
  next(action)
  console.log('next state', store.getState())
}

const exceptionMiddleware = (store) => (next) => (action) => {
  try {
    next(action)
  } catch (err) {
    console.error('錯誤信息: ', err)
  }
}

const logger = loggerMiddleware(store)
const exception = exceptionMiddleware(store)
store.dispatch = exception(logger(next))
複製代碼

若是又有一個新需求，須要在打印日誌前輸出當前時間戳，咱們又須要構造一箇中間件

const timeMiddleware = (store) => (next) => (action) => {
  console.log('time', new Date().getTime())
  next(action)
}

const logger = loggerMiddleware(store)
const exception = exceptionMiddleware(store)
const time = timeMiddleware(store)
store.dispatch = exception(time(logger(next)))
複製代碼

中間件使用方式優化

上面的寫法可知，中間件的使用方式有點繁瑣，故咱們須要把細節封裝起來，經過擴展createStore來實現。先來看看指望的用法：

/* 接收舊的 createStore，返回新的 createStore */
const newCreateStore = applyMiddleware(exceptionMiddleware, timeMiddleware, loggerMiddleware)(createStore);

/* 返回了一個 dispatch 被重寫過的 store */
const store = newCreateStore(reducer);
複製代碼

實現 applyMiddleware

export const applyMiddleware = function (...middlewares) {
  /* 返回一個重寫createStore的方法 */
  return function rewriteCreateStoreFunc(oldCreateStore) {
    /* 返回重寫後新的 createStore */
    return function newCreateStore(reducer, preloadedState) {
      // 生成 store
      const store = oldCreateStore(reducer, preloadedState)
      let dispatch = store.dispatch

      // 只暴露 store 部分給中間件用的API，而不傳入整個store
      const middlewareAPI = {
        getState: store.getState,
        dispatch: (action) => store.dispatch(action),
      }
      // 給每一箇中間件傳入API
      // 至關於 const logger = loggerMiddleware(store)，即 const logger = loggerMiddleware({ getState, dispatch })
      // const chain = [exception, time, logger]
      const chain = middlewares.map((middleware) => middleware(middlewareAPI))
      // 實現 exception(time((logger(dispatch))))
      chain.reverse().map((middleware) => {
        dispatch = middleware(dispatch)
      })
      // 重寫dispatch
      store.dispatch = dispatch
      return store
    }
  }
}
複製代碼

咱們來看這一處代碼：

chain.reverse().map((middleware) => {
    dispatch = middleware(dispatch)
})
複製代碼

要注意一點，中間件是順序執行，可是 dispatch 倒是反序生成的。因此在這步會把數組順序給反序（好比 applyMiddleware(A, B, C)，由於 A 在調用時須要知道 B 的 dispatch，B 在執行時須要知道 C 的 dispatch，那麼須要先知道 C 的 dispatch。）

官方Redux源碼，採用了 compose 函數，咱們也試試這種方式來寫：

export const applyMiddleware = (...middlewares) => {
  return (createStore) => (...args) => {
    // ...
    dispatch = compose(...chain)(store.dispatch)
    // ... 
  }
}

// compose(fn1, fn2, fn3)
// fn1(fn2(fn3))
// 從右到左來組合多個函數: 從右到左把接收到的函數合成後的最終函數
export const compose = (...funcs) => {
  if (funcs.length === 0) {
    return (arg) => arg
  }
  if (funcs.length === 1) {
    return funcs[0]
  }
  return funcs.reduce((ret, item) => (...args) => ret(item(...args)))
}
複製代碼

咱們再對代碼精簡：

export const applyMiddleware = (...middlewares) => {
  return (createStore) => (...args) => {
    const store = createStore(...args)
    let dispatch = store.dispatch

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action),
    }

    const chain = middlewares.map((middleware) => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch,
    }
  }
}

export const compose = (...funcs) => {
  if (funcs.length === 0) {
    return (arg) => arg
  }
  if (funcs.length === 1) {
    return funcs[0]
  }
  return funcs.reduce((ret, item) => (...args) => ret(item(...args)))
}
複製代碼

createStore的處理

如今的問題是，有兩個 createStore 了，這怎麼區分，上篇咱們其實已經先告知了對中間件代碼處理，但具體怎麼推出的，咱們繼續看。

// 沒有中間件的 createStore
const store = createStore(counter)

// 有中間件的 createStore
const rewriteCreateStoreFunc = applyMiddleware(exceptionMiddleware, timeMiddleware, loggerMiddleware);
const newCreateStore = rewriteCreateStoreFunc(createStore);
const store = newCreateStore(counter, preloadedState);
複製代碼

爲了讓用戶用起來統一一些，咱們能夠很簡單的使他們的使用方式一致，咱們修改下 createStore 方法

const createStore = (reducer, preloadedState, rewriteCreateStoreFunc) => {
    // 若是有 rewriteCreateStoreFunc，那就採用新的 createStore 
    if(rewriteCreateStoreFunc){
       const newCreateStore =  rewriteCreateStoreFunc(createStore);
       return newCreateStore(reducer, preloadedState);
    }
    // ...
}
複製代碼

不過Redux源碼 rewriteCreateStoreFunc 換了個名字，還加了判斷，也就是咱們上篇的代碼：

if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }
    return enhancer(createStore)(reducer, preloadedState)
}
複製代碼

因此中間件的用法爲

const store = createStore(counter, /* preloadedState可選 */ applyMiddleware(logger))
複製代碼

combineReducers

若是咱們作的項目很大，有大量 state，那麼維護起來很麻煩。Redux 提供了 combineReducers 這個方法，做用是把多個 reducer 合併成一個 reducer，每一個 reducer 負責獨立的模塊。

咱們用一個新例子來舉例：

import { createStore, applyMiddleware, combineReducers } from 'redux'

const initCounterState = {
  value: 10,
}
const initInfoState = {
  name: 'jacky',
}

const reducer = combineReducers({
  counter: counterReducer,
  info: infoReducer,
})

// counter reducer處理函數
function counterReducer(state = initCounterState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        value: state.value + 1,
      }
    case 'DECREMENT':
      return {
        ...state,
        value: state.value - 1,
      }
    default:
      return state
  }
}

function infoReducer(state = initInfoState, action) {
  switch (action.type) {
    case 'FULL_NAME':
      return {
        ...state,
        name: state.name + ' lin',
      }
    default:
      return state
  }
}

const store = createStore(reducer)

const init = store.getState()
// 一開始counter爲：10，info爲 jacky
console.log(`一開始counter爲：${init.counter.value}，info爲 ${init.info.name}`)
function listener() {
  store.getState()
}
store.subscribe(listener) // 監聽state的改變

// counterReducer
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })

// infoReducer
store.dispatch({ type: 'FULL_NAME' })

// 執行完counter爲：11，info爲jacky lin
console.log(`執行完counter爲：${store.getState().counter.value}，info爲${store.getState().info.name}`)
export default store
複製代碼

咱們來嘗試下如何實現這個 API，

首先要把一個函數裏的全部 reducers 循環執行一遍，而且這個函數要遵循(state, action) => newState 格式。還須要把每一個 reducer 的 initState 合併成一個 rootState。實現以下：

export function combineReducers(reducers) {
  // reducerKeys = ['counter', 'info']
  const reducerKeys = Object.keys(reducers)
  // 返回合併後的新的reducer函數
  return function combination(state = {}, action) {
    // 生成的新的state
    const nextState = {}

    // 遍歷執行全部的reducers，整合成爲一個新的state
    for (let i = 0; i < reducerKeys.length; i++) {
      const key = reducerKeys[i]
      const reducer = reducers[key]
      // 以前的 key 的 state
      const previousStateForKey = state[key]
      // 執行 分 reducer，得到新的state
      const nextStateForKey = reducer(previousStateForKey, action)

      nextState[key] = nextStateForKey
    }
    return nextState
  }
}
複製代碼

replaceReducer

在大型 Web 應用程序中，一般須要將應用程序代碼拆分爲多個能夠按需加載的 JS 包。這種稱爲「代碼分割」的策略經過減少初次加載時的 JS 的包的大小，來提升應用程序的性能。

reducer 拆分後，和組件是一一對應的。咱們就但願在作按需加載的時候，reducer 也能夠跟着組件在必要的時候再加載，而後用新的 reducer 替換老的 reducer。但實際上只有一個 root reducer 函數, 若是要實現的話就能夠用 replaceReducer 這個函數，實現以下：

const createStore = function (reducer, initState) {
  // ...
  const replaceReducer = (nextReducer) => {
    if (typeof nextReducer !== 'function') {
      throw new Error('Expected the nextReducer to be a function.')
    }
    reducer = nextReducer
    // 刷新一遍 state 的值，新來的 reducer 把本身的默認狀態放到 state 樹上去
    dispatch({ type: Symbol() })
  }
  // ...
  return {
    // ...
    replaceReducer
  }
}
複製代碼

使用以下：

const reducer = combineReducers({
  counter: counterReducer
});
const store = createStore(reducer);

/*生成新的reducer*/
const nextReducer = combineReducers({
  counter: counterReducer,
  info: infoReducer
});
/*replaceReducer*/
store.replaceReducer(nextReducer);
複製代碼

bindActionCreators

bindActionCreators 通常比較少用到，在react-redux的 connect 函數實現會用到

會使用到 bindActionCreators 的場景是當你須要把 action creator 往下傳到一個組件上，卻不想讓這個組件覺察到 Redux 的存在，並且不但願把 dispatch 或 Redux store 傳給它。

咱們經過普通的方式來隱藏 dispatch 和 actionCreator 試試

const reducer = combineReducers({
  counter: counterReducer,
  info: infoReducer
});
const store = createStore(reducer);

// 返回 action 的函數就叫 actionCreator
function increment() {
  return {
    type: 'INCREMENT'
  }
}

function getName() {
  return {
    type: 'FULL_NAME',
  }
}

const actions = {
  increment: function () {
    return store.dispatch(increment.apply(this, arguments))
  },
  getName: function () {
    return store.dispatch(getName.apply(this, arguments))
  }
}
// 其餘地方在實現自增的時候，根本不知道 dispatch，actionCreator等細節
actions.increment(); // 自增
actions.getName(); // 得到全名
複製代碼

把actions生成時候的公共代碼提取出來：

const actions = bindActionCreators({ increment, getName }, store.dispatch)
複製代碼

bindActionCreators 的實現以下：

// 返回包裹 dispatch 的函數, 將 actionCreator 轉化成 dispatch 形式
// eg. { addNumAction } => (...args) => dispatch(addNumAction(args))
export function bindActionCreator(actionCreator, dispatch) {
  return function (...args) {
    return dispatch(actionCreator.apply(this, args))
  }
}

export function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }
  // actionCreators 必須是 function 或者 object
  if (typeof actionCreators !== 'object' || actionCreators === null) {
    throw new Error()
  }

  const keys = Object.keys(actionCreators)
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}
複製代碼

可能你們看到這裏有點懵逼，讓咱們來回憶下 react-redux 中 connect 函數的用法，好比有這樣一個 actionCreators

// actionCreators.js
function addNumAction() {
    return { type: 'ADD_NUM' }
}
// Demo.js：在須要用到 store 數據的組件，如 Demo 組件底部咱們用 connect 函數鏈接，以下:
import { addNumAction } from './actionCreators'
const mapDispatchToProps = (dispatch) => ({
  addNum() {
    dispatch(addNumAction())
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(Demo)
複製代碼

而後經過頁面的按鈕來出發 action 爲 ADD_NUM 對應事件

<button onClick={this.props.addNum}>增長1</button>
複製代碼

但除了上面的用法，mapDispatchToProps 也能夠這樣用，直接傳入一個對象，都沒有 dispatch 方法

export default connect(mapStateToProps, { addNumAction })(Demo)
複製代碼

而後只需觸發 addNumAction 就能實現和上面同樣的效果。

爲何能夠不傳，當你傳入對象的時候， connect 函數會判斷，大體代碼以下：

let dispatchToProps

if (typeof mapDispatchToProps === 'function') {
    dispatchToProps = mapDispatchToProps(store.dispatch)
} else {
    // 傳遞了一個 actionCreator 對象過來
    dispatchToProps = bindActionCreators(mapDispatchToProps, store.dispatch)
}
複製代碼

這裏就使用了 bindActionCreators 函數，它就是把你傳入的 actionCreator 再包一層 dispatch方法，即

{ addNumAction }  =>  (...args) => dispatch(addNumAction(args))
複製代碼

總結

Redux 實現講到這裏就結束了，把原理搞懂了確實對 Redux 的理解加深了好多，以後會繼續寫相關插件的實現，如 react-redux 等。

參考資料：

徹底理解 redux（從零實現一個 redux）

ps：我的技術博文Github倉庫，以爲不錯的話歡迎star，給我一點鼓勵吧~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。