Redux和React-Redux的實現（三）：中間件的原理和applyMiddleware、Thunk的實現

来源:https://www.cnblogs.com/isLiu/archive/2017/12/31/8157463.html
-Advertisement-
Play Games

現在我們的Redux和React Redux已經基本實現了，在Redux中，觸發一個action，reducer立即就能算出相應的state，如果我要過一會才讓reducer計算state呢怎麼辦？也就是我們如何實現非同步的action呢？這裡就要用到中間件（middleware） 1. 中間件（mi ...


現在我們的Redux和React-Redux已經基本實現了，在Redux中，觸發一個action，reducer立即就能算出相應的state，如果我要過一會才讓reducer計算state呢怎麼辦？也就是我們如何實現非同步的action呢？這裡就要用到中間件（middleware）

1. 中間件（middleware）介紹

中間就是在action與reducer之間又加了一層，沒有中間件的Redux的過程是：action -> reducer，而有了中間件的過程就是action -> middleware -> reducer，使用中間件我們可以對action也就是對dispatch方法進行裝飾，我們可以用它來實現非同步action、列印日誌、錯誤報告等功能。

又是裝飾器，沒錯，這塊的好多東西都離不開裝飾器模式，所以，設計模式很重要。

關於中間件，有很多框架或者是類庫都使用了中間件，像express、koa、mongoose等都有使用。

2. Redux中間件的使用

我們可以使用Redux提供的applyMiddleware方法來使用一個或者是多個中間件，將它作為createStore的第二個參數傳入即可，我們以Redux-Thunk為例

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(counter, applyMiddleware(thunk))
ReactDOM.render(
  (
    <Provider store={store}>
      <App />
    </Provider>
  ),
  document.getElementById('root')
)

通過thunk中間件，我們就可以實現非同步的action了。

export function addAsync(){
  return dispatch => {
    setTimeout(() => {
      dispatch(add())
    }, 2000);
  }
}

想要實現中間件，我們首先有兩個任務要做：

  1. 擴展createStore方法，使它可以接收第二個參數。

  2. applyMiddleware方法的實現。

3. createStore方法的擴展

我們在createStore中加入第二個參數enhancer, 專業的解釋應該叫增強器，叫middleware也可以的。

我們已經說過中間件的作用就是通過改變dispatch方法來改變數據流，所以我們這裡直接用enhancer對createStore方法進行裝飾。Redux的源碼也是這麼寫的，哈哈哈哈，怎麼和我想到的一模一樣呢？因為我看了Redux的源碼。。

export function createStore (reducer，enhancer) {
  if (enhancer) {
    return enhancer(createStore)(reducer)
  }
  let state = {}
  let listeners = []

  function getState () {
    return state
  }
  function subscribe (listener) {
    listeners.push(listener)
  }
  function dispatch (action) {
    state = reducer(state, action)
    listeners.forEach(listener => listener())
    return action
  }

  dispatch({type: '@myRedux'})
  return {getState, subscribe, dispatch}
}

高階函數的寫法，應該都能看懂了吧？前幾篇隨筆有詳細的講高階函數，還有例子。

4.applyMiddleware方法的實現

先看我們上邊對enhancer的調用，enhancer也就是我們的applyMiddleware接受了createStore做參數，返回了一個函數，這個函數的參數是reducer。現在我們對這種兩層嵌套的函數已經不陌生了，其實它就是一個return兩層的函數。

我們的applyMiddleware主要做了什麼呢？首先通過傳入的createStore方法create了一個store，然後將store的dispatch傳遞給middleware，由middleware對dispatch進行包裝，返回一個帶有被包裝的dispatch的store。

看到這裡，很簡單嘛。但是註意，還記得我們是怎麼使用非同步的action的嗎？

export function addAsync(){
  return (dispatch, getState) => {
    setTimeout(() => {
      dispatch(add())
    }, 2000);
  }
}

居然還可以在可以在非同步的action中拿到dispatch和getState方法，所以要對這個進行處理，也不是很難，把他倆傳給我們的middle就好了。

都說到這裡了，能不能自己寫出來呢？

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

        const midApi = {
            getState: store.getState,
            dispatch: (...args)=>dispatch(...args)
        }
        dispatch = middleware(midApi)(store.dispatch)
        return {
            ...store,
            dispatch
        }
    }
}

如果我們執行了被包裝後的dispatch，就相當於執行了middleware(midApi)(store.dispatch)(action)這段語句，這是一個三層的嵌套函數，我們也稱作柯里化。

5.自己的redux-thunk

其實自己的thunk很簡單，正常的action的的返回值是個對象，前面已經說過，非同步的action的返回值是一個函數，那麼我們只需要判斷一下action的返回的類型即可。

const thunk = ({dispatch, getState}) => next => action => {
    if (typeof action === 'function') {
        return action(dispatch, getState)
    }
    return next(action)
}

export thunk

在這裡呢，dispatch和getState就是我們在applyMiddleware中傳入的那個midApi對象，next就是store.dispatch也可以理解為下一個中間件，如果action的類型是object，說明這是一個同步的，直接dispatch就好了，如果
action的類型是function，當觸發這個dispatch的時候，就觸發action這個函數，同時將dispatch和getState方法傳入到action函數中，這也是為什麼我們能在非同步action中拿到dispatch和getState方法的原因。

6.多個中間件合併與compose方法

我們的applyMiddle方法還不是太完善，只能使用一個中間件，使用多個中間件怎麼辦，這個，簡單，map一下唄。如果是要求多個中間件依此執行怎麼辦？還是map呀，好，來map一下。

我們會得到這樣的代碼：

const store = createStore(
    reducer,
    applyMiddleware(middlewareOne) (
        middlewareTwo(
          middlewareThree(
              ...
          )
        )
    )
)

我們會發現，我們陷入了一個深度嵌套的函數當中，這時我們就需要一個compose方法來結合一下，方便我們的書寫。

compose是函數式編程的一種寫法，compose的作用是從右到左結合多個函數，形成一個最終函數。就是將fn1(fn2(fn3()))的形式，變成compose(fn1, fn2, fn3)的形式。

compose 做的只是讓你在寫深度嵌套的函數時，避免了代碼的向右偏移。不要覺得它很複雜。

compose方法的實現：

export function compose (...funcs){
    if (funcs.length==0) {
        return arg=>arg
    }
    if (funcs.length==1) {
        return funcs[0]
    }
    return funcs.reduce((ret,item)=> (...args)=>{
                console.log(ret)
       return ret(item(...args))
      })
}

compose不是那麼複雜，關於如果想瞭解更多關於compose的知識，可以看看Redux對compose的說明

到這裡我們可以使用多個中間件的applyMiddleware方法已經實現了，整個的applyMiddleware方法在這裡：

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

        const midApi = {
            getState:store.getState,
            dispatch:(...args)=>dispatch(...args)
        }
        const middlewareChain = middlewares.map(middleware=>{
            return middleware(midApi)
        })
        console.log(compose(...middlewareChain)(store.dispatch))
        dispatch = compose(...middlewareChain)(store.dispatch)
        return {
            ...store,
            dispatch
        }
    }
}
export function compose(...funcs){
    if (funcs.length==0) {
        return arg=>arg
    }
    if (funcs.length==1) {
        return funcs[0]
    }
    return funcs.reduce((ret,item)=> (...args)=>{
                console.log(ret)
       return ret(item(...args))
      })
}

到這裡，整個Redux和React-Redux的基本原理我們已經清楚了，也已經基本實現了，發現其中涉及到很多函數式編程和裝飾者模式，還有一次觀察者模式，所以，編程思想和設計模式是很重要的，有時間一定要加強這方面的學習。

我們現在有了這些基礎，可以去看看Redux和React-Redux的源碼，也大體上和我寫的是差不多的，因為我也看了源碼。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 張高興的 Xamarin.Forms 開發筆記：Android 快捷方式 Shortcut 應用
    一、Shortcut 簡介 Shortcut 是 Android 7.1 (API Level 25) 的新特性，類似於蘋果的 3D Touch ，但並不是壓力感應，只是一種長按菜單。Shortcut 是受啟動器限制的，也就是說國內大廠的定製系統大多數是不支持的，那些所謂的可以 pin 在桌面上的應 ...
  • 手機拍照身份證識別，使用成熟的OCR文字識別技術，快速提取身份證信息！
    手機拍照身份證識別使用成熟的OCR文字識別技術，通過手機或者帶有攝像頭的終端設備對身份證拍照，並對證件照片做OCR文字識別，提取身份證信息。此技術越來越被廣大消費用戶認知並使用。優點是：方案成本低，用於智能手機，使用環境方便，功能容易擴展。 近幾年，各種各樣的APP正在取代PC端軟體成為用戶應用方式 ...
  • HTML篇(下·)
    13.Label的作用是什麼？是怎麼用的？ label標簽來定義表單控制間的關係，當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單事件上。 <label for="Name">Number:</label> <input type="text" name="Name" id="Name"/ ...
  • CSS知識點整理（1）：CSS語法，層疊次序，選擇器，其他重要方面。
    1. css的全稱 2. CSS的層疊次序：優先順序由低到高 ·瀏覽器設置 ·外部樣式表 或者 內部樣式表 —— 就近原則 ·內聯樣式 3. CSS的3種形式，以及每種形式的語法格式 ——註意樣式表的為什麼常用link 4. CSS基本語法： selector(property:value; colo ...
  • CSS3 opacity
    opacity用來設置元素的透明度。 值被約束在[0.-1.0]範圍內，如果超過了這個範圍，其計算結果將截取到與之最相近的值。 0表示完全透明，1表示完全不透明。 瀏覽器支持: （1）.IE瀏覽器支持此屬性。 （2）.火狐李藍旗支持此屬性。 （3）.谷歌瀏覽器支持此屬性。 （4）.opera瀏覽器支 ...
  • CSS 簡單介紹
    一.什麼是CSS： CSS是Cascading Style Sheets的縮寫，通常為級聯樣式表。 CSS已經是網路不可或缺的元素，為瀏覽者呈現五彩繽紛的頁面效果起到了重要作用。 CSS是一種標記語言，不需要進行編譯，直接就可以在瀏覽器中執行。 二.使用CSS的優勢： （1）.能夠極大提高代碼的簡潔 ...
  • JavaScript 事件
    事件可以是瀏覽器行為也可以是用戶行為。 比如頁面文檔內容載入完成或者用戶滑鼠點擊等。 當一個事件發生的時候，需要特定的行為來響應這個事件，所以要為事件註冊事件處理函數。 代碼實例: 為按鈕註冊click事件處理函數，當點擊按鈕的時候，此函數就會執行。 本章節只是簡單介紹一下JavaScript事件的 ...
  • HTML 簡單介紹
    一.HTML簡單介紹: HTML是Hypertext Markup Language的英文縮寫，即超文本標記語言。 它是一種標記語言而非編程語言，由瀏覽器解釋支持。 html文件是一種文本文件，可以用記事本打開，當然也可以用其他開發工具，比如dreamweaver和VS等等。通過在文本中添加各種標簽 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類