首先，為何我們要學(xué)習(xí)redux-thunk呢？因?yàn)樽罱鰎edux項(xiàng)目的時(shí)候，發(fā)現(xiàn)內(nèi)部需要做一些異步操作。而在redux的工作流中，reducer是純函數(shù)，內(nèi)部不能進(jìn)行異步操作。那么我們只能將異步的操作放入在actionCreator中進(jìn)行，但是如果直接這樣寫(xiě)會(huì)報(bào)錯(cuò)哦：

　　之前的actionCreators里面做同步操作：

　　如果要做異步操作的話(huà)，我們非常容易想到需要這樣實(shí)現(xiàn)：

　　但是不好意思，瀏覽器直接報(bào)錯(cuò)了! 說(shuō)是這樣必須要采用redux的中間件才可以實(shí)現(xiàn)哦。

　　那么接下來(lái)，我們就要正式的開(kāi)始介紹這個(gè)redux-thunk的作用了

　　在github上面的解釋為：A thunk is a function that wraps an expression to delay its evaluation.

　　redux-thunk就是redux的中間件，中間件就是你可以在收到請(qǐng)求和返回請(qǐng)求之間做一些操作。

　　那么中間件指代的是什么到什么中間呀？

　　指的在派發(fā) action到達(dá)reducer中間的這個(gè)過(guò)程之間。之前沒(méi)有redux-thunk這個(gè)redux中間件的時(shí)候，內(nèi)部的actionCreators只能派發(fā)一個(gè)對(duì)象的action，不能做異步操作。但是后續(xù)使用了這個(gè)中間件之后呢，這個(gè)acitonCreators也可以返回一個(gè)函數(shù)，在函數(shù)內(nèi)部將發(fā)射器通過(guò)參數(shù)dispatch傳遞給我們，讓我們?cè)趦?nèi)部可以進(jìn)行一些異步操作，異步操作結(jié)束后再把真正的action對(duì)象dispatch派發(fā)出去等。

　　好，那redux-thunk作用我們就懂了，那順便我們來(lái)看一下這個(gè)哥們的源碼吧.

　　其實(shí)值得我們分析的函數(shù)為：

　　內(nèi)部判斷傳遞過(guò)來(lái)的action類(lèi)型如果是函數(shù)的話(huà)，就給函數(shù)傳入dispatch, getState參數(shù)，否則執(zhí)行next(action)。next()函數(shù)的作用是把a(bǔ)ction對(duì)象傳給下一個(gè)中間件或?yàn)樽罱K的reducer。

　　所以在項(xiàng)目中使用redux-thunk的步驟為：

　　首先需要：

　　yarn add redux-thunk

　　在創(chuàng)建store倉(cāng)庫(kù)的時(shí)候，需要進(jìn)行相關(guān)配置：

　　最后回到最開(kāi)始的代碼，我們只需要改成下述代碼即可：

　　如果還不懂？那么看一下這個(gè)圖吧：

　　恭喜您！這樣就可以解決在redux中的異步action的問(wèn)題！更多關(guān)于前端培訓(xùn)的問(wèn)題，歡迎咨詢(xún)千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。

　　注：本文部分文字和圖片來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除。版權(quán)歸原作者所有!