redux中間件探秘

Jeff 發(fā)布于2019-08-20 18:26 / 1428人閱讀

摘要：接下來我們來看看源碼中的模塊是怎么應(yīng)用中間件的。如何實(shí)現(xiàn)中間件操作的。新的會(huì)從第一個(gè)中間件開始觸發(fā)，這樣，在我們調(diào)用的時(shí)候，就會(huì)將中間件走一遍了。函數(shù)如果存在多個(gè)中間件，直接使用方法將各個(gè)中間件嵌套起來。

從redux-thunk引出思考

在使用redux-thunk進(jìn)行異步action書寫的時(shí)候，我經(jīng)常好奇redux到底如何運(yùn)作，讓asyncAction成為可能

為了探究，我們必須看一下redux-thunk的源碼了。幸運(yùn)的是redux-thunk的源碼很少。。。至于為什么，下面立馬講解。

redux-thunk的源碼

// redux-thunk source code
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === "function") {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

從源碼可以看出該中間件僅僅只是一個(gè)工廠函數(shù)，輸出了一個(gè)嵌套工廠函數(shù)的工廠函數(shù)，那個(gè)最終參數(shù)帶著next的返回函數(shù)，就是redux所需要適應(yīng)的中間件。

以es6箭頭語法看來可能比較麻煩，我們可以試著把這個(gè)代碼直接轉(zhuǎn)成es5的形式看看。

function createThunkMiddleware(extraArgument) {
  return function (storeOrFakeStore) {
    var dispatch = storeOrFakeStore.dispatch;
    var getState = storeOrFakeStore.getState;
    return function (next) {
      return function (action) {
          return action(dispatch, getState, extraArgument);
      }
      return next(action);
    }
  };
}

從這個(gè)源碼可以看出，本身中間件是會(huì)接受當(dāng)前store或者一個(gè)fakeStore（這個(gè)fakeStore可能僅僅只承載了store的兩個(gè)api，dispatch和getState），并將dispatch和getState這兩個(gè)store的方法傳進(jìn)可能執(zhí)行異步操作的action函數(shù)里。這樣，action完成異步操作以后，同樣被賦予了dispatch的權(quán)利，就能夠?qū)顟B(tài)通過action流轉(zhuǎn)到下一個(gè)場(chǎng)景了。

那同學(xué)們又會(huì)問了，這個(gè)next是個(gè)啥？恩，其實(shí)這個(gè)next其實(shí)就是下一個(gè)要處理action的中間件，畢竟中間件是一個(gè)接著一個(gè)的對(duì)吧。如果大家寫過koa或者express應(yīng)該對(duì)這個(gè)next會(huì)熟悉很多。

接下來我們來看看react源碼中的createStore模塊是怎么應(yīng)用中間件的。

我們使用createStore api創(chuàng)建store的時(shí)候發(fā)生了什么

applyMiddleware同樣也是一個(gè)工廠，如果讀者您用過redux中間件的話，你應(yīng)該知道redux創(chuàng)建store是怎樣創(chuàng)建的

const store = createStore(
  reducer,
  applyMiddleware(...middleware)
)

以下是createStore的源碼，我們只看相關(guān)的一部分

export default function createStore(reducer, preloadedState, enhancer) {
  if (typeof preloadedState === "function" && typeof enhancer === "undefined") {
    enhancer = preloadedState
    preloadedState = undefined
  }

  if (typeof enhancer !== "undefined") {
    if (typeof enhancer !== "function") {
      throw new Error("Expected the enhancer to be a function.")
    }

    return enhancer(createStore)(reducer, preloadedState)
  }
  ...
}

結(jié)合store的聲明和使用，我們可以知道redux的第三個(gè)參數(shù)可以接受一個(gè)叫做增強(qiáng)器的東西，如果存在增強(qiáng)器，則直接調(diào)用增強(qiáng)器方法，返回新的store并增強(qiáng)redux的功能。而使用中間件的時(shí)候，redux將存在的applyMiddleware工廠方法作為增強(qiáng)器應(yīng)用在了redux上。

applyMiddleware api如何實(shí)現(xiàn)中間件操作的。

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

applyMiddleware工廠函數(shù)對(duì)傳入的中間件進(jìn)行了compose操作，使中間件互相之間呈嵌套的形式，這樣在中間件里的next函數(shù)就可以next()執(zhí)行下去了。。。新的dispatch會(huì)從第一個(gè)中間件開始觸發(fā)，這樣，在我們調(diào)用store.dispatch的時(shí)候，就會(huì)將中間件走一遍了。

// compose函數(shù)
export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }
  // 如果存在多個(gè)中間件，直接使用reduce方法將各個(gè)中間件嵌套起來。
  // 于是我們?cè)谑褂弥虚g件的時(shí)候就要注意了，中間件本質(zhì)是一個(gè)攔截操作
  // 如果我們有兩個(gè)中間件對(duì)某一個(gè)類型的action先后做了攔截，我們必須注意
  // 在createStore的時(shí)候插入中間件的順序，中間件方法的執(zhí)行是有序的。
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

你也可以制作一個(gè)中間件

怎么樣，redux的源碼簡(jiǎn)單嗎？簡(jiǎn)單到同學(xué)們也能自己開發(fā)中間件，現(xiàn)在大家自己也可以動(dòng)手寫自己的react中間件了。

GPU云服務(wù)器云服務(wù)器探秘 Redux redux源碼 redux-saga

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84517.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Jeff

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

cuda9.0對(duì)應(yīng)tensorflow版本

閱讀 739·2023-04-26 02:08
C語言第三期（1萬字函數(shù)-數(shù)組-操作符詳解）

閱讀 2778·2021-11-18 10:02
Java調(diào)用dll文件

閱讀 3543·2021-11-11 16:55
酷銳云：周年慶，全場(chǎng)8折起，1核1G內(nèi)存40G硬盤5M帶寬月付10元起

閱讀 2409·2021-08-17 10:13
簡(jiǎn)單浮層制作

閱讀 2963·2019-08-30 15:53
前端面試每日 3+1 —— 第136天

閱讀 738·2019-08-30 15:44
font-family 需要設(shè)置一個(gè)默認(rèn)值

閱讀 2618·2019-08-30 11:10
學(xué)習(xí)筆記 - Sass的安裝與使用手冊(cè)

閱讀 1819·2019-08-29 16:57

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

redux中間件探秘

相關(guān)文章

React Render Array 性能大亂斗

React 內(nèi)部機(jī)制探秘 - React Component 和 Element（文末附彩蛋demo

前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇

2017-09-30 前端日?qǐng)?bào)

JavaScript 工作原理之十五－類和繼承及 Babel 和 TypeScript 代碼轉(zhuǎn)換探秘

發(fā)表評(píng)論

0條評(píng)論

Jeff

男|高級(jí)講師

TA的文章

cuda9.0對(duì)應(yīng)tensorflow版本

C語言第三期（1萬字函數(shù)-數(shù)組-操作符詳解）

Java調(diào)用dll文件

酷銳云：周年慶，全場(chǎng)8折起，1核1G內(nèi)存40G硬盤5M帶寬月付10元起

簡(jiǎn)單浮層制作

前端面試每日 3+1 —— 第136天

font-family 需要設(shè)置一個(gè)默認(rèn)值

學(xué)習(xí)筆記 - Sass的安裝與使用手冊(cè)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

redux中間件探秘

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！