redux淺析

galois 發(fā)布于2019-08-22 16:40 / 1880人閱讀

摘要：概念是一個狀態(tài)管理容器使用可以更好的管理和監(jiān)測組件之間需要通信的數(shù)據(jù)。參考源碼參考鏈接

redux概念

redux是一個狀態(tài)管理容器,使用redux可以更好的管理和監(jiān)測組件之間需要通信的數(shù)據(jù)。

redux基本原則 單一數(shù)據(jù)源

在redux中,整個應(yīng)用保持一個數(shù)據(jù)源,數(shù)據(jù)源是一個樹形的結(jié)構(gòu)

狀態(tài)只讀

狀態(tài)只讀意思是不能直接修改,需要通過dispatch action方式才可以,返回的是一個新的狀態(tài)對象

純函數(shù)操作改變數(shù)據(jù)

改變數(shù)據(jù)的純函數(shù)是指reducer,如下形式

reducer(state, action)

函數(shù)內(nèi)部通常是switch case這些代碼,函數(shù)的結(jié)果完全由兩個參決定,同樣的輸入條件,會產(chǎn)生同樣的輸出結(jié)果

redux使用

//reducer.js
export default (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1
    case "DECREMENT":
      return state - 1
    default:
      return state
  }
}
//main.js
import { createStore } from "redux"
const store = createStore(counter)
store.getState()  //獲取狀態(tài)
store.dispatch({ type: "INCREMENT" })  //改變狀態(tài)

說明上面是純redux的一個簡單示例, 目的是改變store內(nèi)部計數(shù)器的狀態(tài)
結(jié)合react使用例子,可以參考我之前的分析

redux分析

redux的核心非常簡潔, 提供了中間件機(jī)制可以拓展功能。核心模塊主要有以下幾部分

  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose

下面依次來分析,首先是createStore模塊,主要實現(xiàn)邏輯如下

export default function (reducer, preloadedState) {
    let currentState = preloadedState;
    let listeners = [];
    function getState() {
        return currentState
    }
    //派發(fā)action
    function dispatch(action) {
        //通過舊狀態(tài)和新action計算出新狀態(tài)
        currentState = reducer(currentState, action);
        //執(zhí)行監(jiān)聽函數(shù)
        listeners.forEach(listener => listener());
    }
    //派發(fā)了一個動作進(jìn)行初始化
    dispatch({ type: "@@redux/INIT" });
    //供外界訂閱本倉庫中狀態(tài)的變化 
    function subscribe(listener) {
        listeners.push(listener);
        //返回一個取消訂閱函數(shù)
        return function () {
            listeners = listeners.filter(item => item != listener)
        }
    }
    return {
        getState, dispatch, subscribe
    }
}

說明這個模塊主要通過閉包的方式創(chuàng)建一個store,封裝了處理邏輯,對外只提供getState(獲取狀態(tài)),dispatch(派發(fā)action),subscribe(訂閱改變)三個接口。

combineReducers主要實現(xiàn)邏輯如下

export default function combineReducers(reducers) {
    const finalReducerKeys = Object.keys(reducers)
    //返回的是合并后的reducer
    return function combination(state = {}, action) {
        let hasChanged = false
        const nextState = {}
        for (let i = 0; i < finalReducerKeys.length; i++) {
          const key = finalReducerKeys[i]
          const reducer = finalReducers[key]
          const previousStateForKey = state[key]
          //計算子store中,state的值
          const nextStateForKey = reducer(previousStateForKey, action)
        
          nextState[key] = nextStateForKey
          //如果沒改變的話,還是用之前的state
          hasChanged = hasChanged || nextStateForKey !== previousStateForKey
        }
        return hasChanged ? nextState : state
      }
    }

說明源碼有快200行了,考慮了各種邊界情況,核心邏輯就上面一點, 和并多個reducer成一個對象

bindActionCreators主要實現(xiàn)邏輯如下

export default function bindActionCreators(actionCreators, dispatch) {
  const keys = Object.keys(actionCreators)
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    //把一個 value 為不同 action creator 的對象，轉(zhuǎn)成擁有同名 key 的對象
    if (typeof actionCreator === "function") {
    //使用 dispatch 包裝 action creator 以便子組件可以直接調(diào)用。
      boundActionCreators[key] = function() { return dispatch(actionCreator.apply(this, arguments)) }
    }
  }
  return boundActionCreators
}

說明惟一會使用到 bindActionCreators 的場景是把 action creator 往下傳到一個組件上，卻不想讓這個組件覺察到 Redux 的存在，而且不希望把 dispatch 或 Redux store 傳給它。

applyMiddleware

export default function applyMiddleware(...middlewares) {
    //下面這句話在create.js中 enhancer(createStore)(reducer, preloadedState)時會執(zhí)行,目的是創(chuàng)建一個增強(qiáng)版的store
  return (createStore) => (...args) => {
    //還是調(diào)用原生createStore邏輯進(jìn)行初始化創(chuàng)建store
    const store = createStore(...args)
    let dispatch = store.dispatch
    let chain = []
    // 傳遞給中間件使用
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    //加工中間件,注入middlewareAPI
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    //形成洋蔥中間件形式包裹dispatch結(jié)構(gòu)的形式
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

說明 applyMiddleware中間件機(jī)制,可以在處理store前后加一些通用處理,實現(xiàn)這個機(jī)制功能最重要,也是最難理解的一步操作就是compose,見下面分析。

compose

export default function compose(...funcs) {
  
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

說明將多個函數(shù)合并成一個函數(shù)，嵌套執(zhí)行,舉個例子,例如compose(f, g, h)后就變成f(g(h())),而函數(shù)的執(zhí)行順序從右到左，h() g() f()

總結(jié)

為了方便理解,我主要將源碼中關(guān)鍵主流程邏輯做了摘要簡化輸出,加以注釋說明,額外想說的一點感想就是,在redux生態(tài)體系中用到了大量函數(shù)式編程中的一些東西,例如高階函數(shù),以及隨時間不斷增長的action動作列表(可以等價思考認(rèn)為redux對這個列表進(jìn)行reduce操作),而處理action的就是純函數(shù)理念的reducer,還有處理異步的中間件thunk函數(shù)等等。

參考源碼
"redux": "3.7.2",
參考鏈接
https://redux.js.org/