（1）概念圖+簡介

　　

　　中間件相當于在Action到Reducer的中間放置了一個函數，常用場景：項目日志、創建奔潰報告、調用異步接口等等。

　　例如之前常用案例ToDoList里的Redux結合axios異步獲取數據

　　

　　實際開發里，一般會將異步調用放到Redux中間件Redux-thunk來完成。

　　Redux中間件很多，這里我們介紹一種常見的Redux-thunk.

（2）安裝

　　首先安裝依賴

>npm i redux-thunk --save

　　

（3）配置

　　配置store/index.js文件，首先引入redux的applyMiddleware中間件方法，然后引入第三方中間件依賴包，接著傳入調用即可

　　

　　測試發現中間件不能和瀏覽器Redux-devTools調試工具的環境變量同時存在，此時便需要用到Redux的增強函數方法

　　

　　代碼如下：

import {createStore,applyMiddleware,compose} from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk'

const composeEnhancers = 
    window.__REDUX_DEVTOOLS_EXTENSION_COMPONSE_?window.__REDUX_DEVTOOLS_EXTENSION_COMPONSE__({}):compose
const enhancer = composeEnhancers(applyMiddleware(thunk))//增強函數相當于鏈式調用
const store = createStore(
    reducer,
    enhancer
)
export default store

　　注意：官方文檔沒有兩個函數的同時調用說明，所以這里需要用到增強函數，做個類似的鏈式調用。

　　

（4）使用

　　之前案例ToDoList中，結合axios和redux完成了數據的異步請求，直接在組件里使用生命周期鉤子里進行數據操作

　　

　　因為之前redux要求必須是純函數形式，所以我們不能直接在里面做異步操作，但現在有了中間件，可以結合中間件做處理。

　　1、引入axios并編寫新的action，來異步獲取數據

　　

　　

　　編寫完成后，需要調用action才會執行，所以修改組件，將原先的生命周期鉤子改為調用action

　　

　　將其改為調用action，首先引入action，然后注冊調用

　　

　　

　　此時控制臺已經打印出相關數據

　　

　　接下來直接將其數據dispatch給reducers即可。

注意：
    這里在箭頭函數中傳入dispatch參數，即可在內部調用

　　、　　

　　當然，也可以在該文件引入store然后自行調用

　　

　　

注意（Redux中間件優勢對比）：
   1、使用redux中間件獲取數據進行處理相對之前寫法，完善了很多。此時關于redux數據的持久化存儲、所以業務邏輯都放到了action（Redux所屬系統里），而不是生命周期里。
    2、如果將業務邏輯都放到生命周期鉤子里，那么生命周期函數將會變得非常臃腫，且缺乏邏輯性　

.

總結

以上是生活随笔為你收集整理的Redux中间件redux-thunk中间件之安装、配置、使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。