redux中介軟體和redux thunk實現原理

2022-06-25 20:18:08 字數 3767 閱讀 4462

redux-thunk這個中介軟體可以使我們把這樣的非同步請求或者說複雜的邏輯可以放到action裡面去處理,redux-thunk使redux的乙個中介軟體,為什麼叫做中介軟體

我們說中介軟體,那麼肯定是誰和誰的中間,那麼redux的中介軟體指的是誰和誰的中間呢?

如圖。view在redux中會派發乙個action,action通過store的dispatch方法派發給store,store接收到action,連同之前到state,一起傳給reducer,reducer返回乙個新到資料給store,store去改變自己到state。這是redux的乙個標準流程,那麼我們說redux的中介軟體指的是誰和誰的之間,大家一定要記住,redux的中介軟體指的是action和store之間。之前我們說action只能是乙個物件,所以action是乙個物件直接派發給了store。但是現在,當我們使用了redux-thunk之後,action可以是函式了。

為什麼可以是函式呢,看這張圖。action通過dispatch方法被傳遞給store,那麼action和store之間是誰,是不是就是dispatch這個方法,實際上我們指的中介軟體指的是什麼呢,就是對dispatch方法的乙個封裝,或者說是dispatch方法的乙個公升級,最原始的dispatch方法,他接收到乙個物件之後,會把這個物件傳遞給store,這就是view中介軟體的乙個情況。當我們對dispath做了乙個公升級之後,比如說我們使用了redux-thunk這個中介軟體,對dispath做了乙個公升級,這個時候當你呼叫dispatch方法,給dispatch傳遞的引數是乙個物件的話,那麼這個dispatch就會把這個物件直接傳給store。跟之前寫乙個物件,呼叫dispatch傳給store沒有任何的區別。但是這個時候假設傳給dispatch方法是乙個函式的話,這個時候dispatch方法已經公升級了。他知道如果你傳遞過來是乙個函式的話,他就不會把這個函式直接傳遞給store。他會怎麼辦呢?

他會讓你這個函式先執行,然後執行完了之後,需要呼叫store的時候,這個函式再去呼叫store。所以dispatch做了乙個事情,他會根據引數的不同,執行不同的事情,如果你引數是物件,那我直接傳給store。如果你引數是函式,那就把這個函式執行結束。所以講到這大家應該知道

redux中介軟體,他的原理是非常簡單的,他就是對store對dispatch方法做乙個公升級,之前這個dispatch方法只能接收乙個物件,現在公升級之後,就可以接收物件,也可以接收函式了。當然這裡用什麼對他進行乙個公升級呢?用redux-thunk對他進行了公升級。當然中介軟體不只redux-thunk這乙個,實際上redux中介軟體非常多,比如說我們說的redux-log,可以記錄action每次派發的日誌,那他怎麼記錄呢?其實也很簡單,每次呼叫 action的時候,都會通過dispatch把這個action傳遞給store,那麼我可以對dispatch做乙個公升級,dispatch不僅僅把action傳遞給store,而且在每次傳遞之前呢,還通過console.log,把這個action列印出來。這樣就寫了乙個redux-log的中介軟體。他可以在每次派發action的時候,把這個action列印在控制台裡面。

最近用的比較火的redux中介軟體,除了redux-thunk,redux-log這樣的東西,還有乙個中介軟體,叫做redux-saga。他的應用範圍也非常廣,redux-saga也是解決redux中間非同步問題的中介軟體。不同於redux-thunk。redux-thunk是把非同步操作放在action裡面操作。而redux-saga採用的設計思想是,單獨的把乙個非同步邏輯拆分出來,放在乙個非同步檔案裡面管理,基本上掌握了redux-thunk和redux-saga這兩者的設計思路之後呢,再去做redux裡面的非同步邏輯,或者說複雜的邏輯,如何去拆分,就比較明白了

redux-thunk這個中介軟體可以使我們把這樣的非同步請求或者說複雜的邏輯可以放到action裡面去處理,redux-thunk使redux的乙個中介軟體,為什麼叫做中介軟體

我們說中介軟體,那麼肯定是誰和誰的中間,那麼redux的中介軟體指的是誰和誰的中間呢?

如圖。view在redux中會派發乙個action,action通過store的dispatch方法派發給store,store接收到action,連同之前到state,一起傳給reducer,reducer返回乙個新到資料給store,store去改變自己到state。這是redux的乙個標準流程,那麼我們說redux的中介軟體指的是誰和誰的之間,大家一定要記住,redux的中介軟體指的是action和store之間。之前我們說action只能是乙個物件,所以action是乙個物件直接派發給了store。但是現在,當我們使用了redux-thunk之後,action可以是函式了。

為什麼可以是函式呢,看這張圖。action通過dispatch方法被傳遞給store,那麼action和store之間是誰,是不是就是dispatch這個方法,實際上我們指的中介軟體指的是什麼呢,就是對dispatch方法的乙個封裝,或者說是dispatch方法的乙個公升級,最原始的dispatch方法,他接收到乙個物件之後,會把這個物件傳遞給store,這就是view中介軟體的乙個情況。當我們對dispath做了乙個公升級之後,比如說我們使用了redux-thunk這個中介軟體,對dispath做了乙個公升級,這個時候當你呼叫dispatch方法,給dispatch傳遞的引數是乙個物件的話,那麼這個dispatch就會把這個物件直接傳給store。跟之前寫乙個物件,呼叫dispatch傳給store沒有任何的區別。但是這個時候假設傳給dispatch方法是乙個函式的話,這個時候dispatch方法已經公升級了。他知道如果你傳遞過來是乙個函式的話,他就不會把這個函式直接傳遞給store。他會怎麼辦呢?

他會讓你這個函式先執行,然後執行完了之後,需要呼叫store的時候,這個函式再去呼叫store。所以dispatch做了乙個事情,他會根據引數的不同,執行不同的事情,如果你引數是物件,那我直接傳給store。如果你引數是函式,那就把這個函式執行結束。所以講到這大家應該知道

redux中介軟體,他的原理是非常簡單的,他就是對store對dispatch方法做乙個公升級,之前這個dispatch方法只能接收乙個物件,現在公升級之後,就可以接收物件,也可以接收函式了。當然這裡用什麼對他進行乙個公升級呢?用redux-thunk對他進行了公升級。當然中介軟體不只redux-thunk這乙個,實際上redux中介軟體非常多,比如說我們說的redux-log,可以記錄action每次派發的日誌,那他怎麼記錄呢?其實也很簡單,每次呼叫 action的時候,都會通過dispatch把這個action傳遞給store,那麼我可以對dispatch做乙個公升級,dispatch不僅僅把action傳遞給store,而且在每次傳遞之前呢,還通過console.log,把這個action列印出來。這樣就寫了乙個redux-log的中介軟體。他可以在每次派發action的時候,把這個action列印在控制台裡面。

最近用的比較火的redux中介軟體,除了redux-thunk,redux-log這樣的東西,還有乙個中介軟體,叫做redux-saga。他的應用範圍也非常廣,redux-saga也是解決redux中間非同步問題的中介軟體。不同於redux-thunk。redux-thunk是把非同步操作放在action裡面操作。而redux-saga採用的設計思想是,單獨的把乙個非同步邏輯拆分出來,放在乙個非同步檔案裡面管理,基本上掌握了redux-thunk和redux-saga這兩者的設計思路之後呢,再去做redux裡面的非同步邏輯,或者說複雜的邏輯,如何去拆分,就比較明白了

redux 中介軟體 redux thunk

什麼是中介軟體?中介軟體指的是redux的,不是react的。中間指的是action跟store之間,也就是對dispacth方的封裝,最原始的是直接將接受過來的物件直接傳遞給store,但是如果傳遞的是乙個函式的話,就不會將這直接傳遞給store,而是先執行這個函式。常見的中間有 redux de...

redux中介軟體原理

應用了如下的中介軟體 a,b,c 整個執行 action 的過程為 a b c dispatch c b a action 最右側的next action 返回的是應用傳入的action 該行為是由redux createstore原始碼中dispatch方法返回值決定的,不過一般都會return ...

redux中介軟體剖析

首先我們來了解一下redux的幾個基本概念 redux的乙個粗略的是處理過程就是 redux中介軟體其實是提供了位於action被發起之後,到達reducer之前的擴充套件點,暫時簡單理解為這樣 其實不然,實際詳細結構往後看ovo 箭頭函式風格 next action 相當於 至於為什麼要這種格式,...