Redux中間件redux-thunk使用詳解
更新時間：2025年09月05日 16:53:51 作者：噢，我明白了
redux-thunk是一種用于緩存異步數(shù)據(jù)的工具,能夠優(yōu)化頁面性能并提升加載速度,它通過緩存接口數(shù)據(jù),使多個頁面復(fù)用數(shù)據(jù),避免多次調(diào)用接口,解決異步操作帶來的性能問題,使用redux-thunk可以簡化中間件集成,提升應(yīng)用運行效率
什么是redux-thunk？
redux-thunk主要用于處理reducer無法處理的異步
1.什么是異步？
- 同步：就是指前一個任務(wù)完成之后在繼續(xù)執(zhí)行下一個任務(wù)，程序的執(zhí)行順序與任務(wù)的排列順序是一致的、同步的。
- 異步：每一個任務(wù)有一個或多個回調(diào)函數(shù)（callback），前一個任務(wù)結(jié)束后，不執(zhí)行下一個任務(wù)，而是執(zhí)行回調(diào)函數(shù)，后一個任務(wù)不等前一個任務(wù)結(jié)束就執(zhí)行，所以程序的執(zhí)行順序與任務(wù)的排列順序是不一致的、異步的。
2.異步通常會發(fā)生在比較復(fù)雜的功能使用中
例如：
- axios請求接口數(shù)據(jù)接口數(shù)據(jù)返回則為異步
- 回調(diào)函數(shù)，當(dāng)函數(shù)a作為參數(shù)傳遞給函數(shù)b，并在b函數(shù)完成后執(zhí)行。
- 在我們使用redux時遇到異步不能解決，可以通過redux-thunk解決。
- 我們也可以利用redux-thunk對數(shù)據(jù)進行緩存，實現(xiàn)調(diào)取一次接口，多頁面可以復(fù)用數(shù)據(jù)，
- 避免了多次調(diào)用接口的性能問題，可以提升頁面加載速度。
3.redux-thunk的使用
(1).下載：
npm i redux-thunk
(2).引入：
import reduxThunk from 'redux-thunk';
(3).使用應(yīng)用中間件的方法applyMiddleware()引入到reducer文件中
const reducer = combineReducers({areducer,breducer,creducer})
//combineReducers是對多頁面reducer管理使用
//將大的reducer拆分，之后用combineReducers進行合并
const store = createStore(reducer,applyMiddleware(reduxThunk));
(4).在action文件中使用redux-thunk
- 正常的action是由一個函數(shù)返回的普通的js對象
- 而當(dāng)我們使用thunk時，則是在函數(shù)的內(nèi)部中返回一個函數(shù)，dispath作為形參傳入。這樣我們也能很好的了解到源碼寫的原理
- 源碼原理：判斷函數(shù)傳入的參數(shù)是func還是普通的jis對象，從而幫助我們對異步進行處理
function getLidtaction(){
return (dispatch)=>{
axios(url:'xxxxxxx', method: 'get',).then((res)=>{
//此次寫異步處理
dispatch(
{
type:'',
payload: res.data
})
})
}
}
(5).在對應(yīng)的list.js文件中使用
useEffect(()=>{
store.dispatch(getLidtaction())
},[])
注意：applyMiddleware()一定要使用不然將無法使用thunk，頁面會報錯
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript下的時間格式處理函數(shù)Date.prototype.format
這篇文章主要介紹了JavaScript下的時間格式處理函數(shù)Date.prototype.format的相關(guān)資料,需要的朋友可以參考下2016-01-01
下面小編就為大家?guī)硪黄钊肜斫鈐s generator數(shù)據(jù)類型。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
js中arguments,caller,callee,apply的用法小結(jié)
本篇文章只要是對js中arguments,caller,callee,apply的用法進行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JS對象與json字符串相互轉(zhuǎn)換實現(xiàn)方法示例
這篇文章主要介紹了JS對象與json字符串相互轉(zhuǎn)換實現(xiàn)方法,結(jié)合實例形式分析了js對象與json字符串相互轉(zhuǎn)換的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-06-06
微信JSSDK實現(xiàn)打開攝像頭拍照再將相片保存到服務(wù)器
這篇文章主要介紹了微信JSSDK實現(xiàn)打開攝像頭拍照再將相片保存到服務(wù)器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
微信小程序使用progress組件實現(xiàn)顯示進度功能【附源碼下載】
這篇文章主要介紹了微信小程序使用progress組件實現(xiàn)顯示進度功能,涉及progress組件相關(guān)屬性設(shè)置操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了JavaScript實現(xiàn)頁面高亮操作提示和蒙板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
現(xiàn)將img元素對應(yīng)的src路徑設(shè)置為背景圖片，而該img所對應(yīng)的url路徑存放在一個自設(shè)的屬性中2014-03-03
簽名板在網(wǎng)頁應(yīng)用中扮演著重要角色,它們能夠記錄用戶的手寫簽名或者繪圖,下面就跟隨小編一起來學(xué)習(xí)一下如何使用JavaScript實現(xiàn)簽名板功能2024-10-10