首先，為何我們要學(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)行，但是如果直接這樣寫會(huì)報(bào)錯(cuò)哦：

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

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

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

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

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

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

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

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

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

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

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

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

　　首先需要：

　　yarn add redux-thunk

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

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

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

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

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