Redux中間件redux-thunk使用詳解
更新時(shí)間：2025年09月05日 16:53:51 作者：噢，我明白了
redux-thunk是一種用于緩存異步數(shù)據(jù)的工具,能夠優(yōu)化頁面性能并提升加載速度,它通過緩存接口數(shù)據(jù),使多個(gè)頁面復(fù)用數(shù)據(jù),避免多次調(diào)用接口,解決異步操作帶來的性能問題,使用redux-thunk可以簡化中間件集成,提升應(yīng)用運(yùn)行效率
什么是redux-thunk？
redux-thunk主要用于處理reducer無法處理的異步
1.什么是異步？
- 同步：就是指前一個(gè)任務(wù)完成之后在繼續(xù)執(zhí)行下一個(gè)任務(wù)，程序的執(zhí)行順序與任務(wù)的排列順序是一致的、同步的。
- 異步：每一個(gè)任務(wù)有一個(gè)或多個(gè)回調(diào)函數(shù)（callback），前一個(gè)任務(wù)結(jié)束后，不執(zhí)行下一個(gè)任務(wù)，而是執(zhí)行回調(diào)函數(shù)，后一個(gè)任務(wù)不等前一個(gè)任務(wù)結(jié)束就執(zhí)行，所以程序的執(zhí)行順序與任務(wù)的排列順序是不一致的、異步的。
2.異步通常會(huì)發(fā)生在比較復(fù)雜的功能使用中
例如：
- axios請(qǐng)求接口數(shù)據(jù)接口數(shù)據(jù)返回則為異步
- 回調(diào)函數(shù)，當(dāng)函數(shù)a作為參數(shù)傳遞給函數(shù)b，并在b函數(shù)完成后執(zhí)行。
- 在我們使用redux時(shí)遇到異步不能解決，可以通過redux-thunk解決。
- 我們也可以利用redux-thunk對(duì)數(shù)據(jù)進(jìn)行緩存，實(shí)現(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是對(duì)多頁面reducer管理使用
//將大的reducer拆分，之后用combineReducers進(jìn)行合并
const store = createStore(reducer,applyMiddleware(reduxThunk));
(4).在action文件中使用redux-thunk
- 正常的action是由一個(gè)函數(shù)返回的普通的js對(duì)象
- 而當(dāng)我們使用thunk時(shí)，則是在函數(shù)的內(nèi)部中返回一個(gè)函數(shù)，dispath作為形參傳入。這樣我們也能很好的了解到源碼寫的原理
- 源碼原理：判斷函數(shù)傳入的參數(shù)是func還是普通的jis對(duì)象，從而幫助我們對(duì)異步進(jìn)行處理
function getLidtaction(){
return (dispatch)=>{
axios(url:'xxxxxxx', method: 'get',).then((res)=>{
//此次寫異步處理
dispatch(
{
type:'',
payload: res.data
})
})
}
}
(5).在對(duì)應(yīng)的list.js文件中使用
useEffect(()=>{
store.dispatch(getLidtaction())
},[])
注意：applyMiddleware()一定要使用不然將無法使用thunk，頁面會(huì)報(bào)錯(cuò)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
因?yàn)橐鲆粋€(gè)日歷控件,遇到國家法定節(jié)假日,怎么實(shí)現(xiàn)此功能呢？其實(shí)實(shí)現(xiàn)代碼很簡單的,下面小編給大家分享js判斷節(jié)假日實(shí)例代碼,需要的朋友參考下吧2017-12-12
這篇文章主要介紹了JavaScript中的cssText是什么,style.cssText使用教程,cssText返回值是什么,需要的朋友可以參考下2014-11-11
javascripit實(shí)現(xiàn)密碼強(qiáng)度檢測代碼分享
這篇文章主要介紹了javascripit實(shí)現(xiàn)密碼強(qiáng)度檢測，大家參考使用吧2013-12-12
JavaScript 九種跨域方式實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript 九種跨域方式實(shí)現(xiàn)原理，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
點(diǎn)擊按鈕彈出模態(tài)框的一系列操作代碼實(shí)例
這篇文章主要介紹了js彈出模態(tài)框方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
ElementUI中el-tree如何獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài)
ElementUI中el-tree獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài),有時(shí)候需要獲取el-tree每個(gè)節(jié)點(diǎn)的點(diǎn)擊狀態(tài),可以通過以下方式,其中isCheck類型為布爾值,本文結(jié)合實(shí)例代碼介紹ElementUI中el-tree獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài),感興趣的朋友一起看看吧2023-12-12
之前的彈出層做的挺好，但是代碼結(jié)構(gòu)有問題，這次用到了，重構(gòu)了一下，改為jQuery的插件形式，感覺還不錯(cuò)，有興趣的朋友可以參考下，希望可以幫助到你2013-04-04
javascript HTML5 Canvas實(shí)現(xiàn)圓盤抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了javascript HTML5 Canvas實(shí)現(xiàn)圓盤抽獎(jiǎng)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)好看的分類頁，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
javascript中IIFE立即執(zhí)行函數(shù)表達(dá)式來龍去脈解析
Ben?Alman于2010年提出IIFE立即執(zhí)行函數(shù)表達(dá)式,取代舊稱Self-ExecutingAnonymousFunction,通過括號(hào)包裹函數(shù)聲明轉(zhuǎn)為表達(dá)式,實(shí)現(xiàn)立即執(zhí)行,常見形式為()包裹,其他變種如new、void等不推薦使用,感興趣的朋友一起看看吧2025-07-07