redux中介軟體的用法

2022-07-12 22:33:16 字數 1232 閱讀 9915

1.定義

中介軟體就是乙個函式,對store.dispatch方法進行了改造,在發出 action 和執行 reducer 這兩步之間,新增了其他功能。

2.舉例 日誌中介軟體

import createlogger from 'redux-logger';

const logger =createlogger();

const store =createstore(

reducer,

);4.非同步操作的思路

1.同步操作只要發出一種 action 即可,非同步操作的差別是它要發出三種 action。分別是操作發起,操作成功,操作失敗

以抓取資料為例,共有兩種寫法

//

寫法一:名稱相同,引數不同

}//寫法二:名稱不同

}

非同步操作的思路

5 redux-thunk 中介軟體

操作結束自動發出乙個action 載入成功後(componentdidmount方法),它送出了(dispatch方法)乙個 action,向伺服器要求資料fetchposts(selectedsubreddit)。這裡的fetchposts就是 action creator。fetchposts是乙個action creator(動作生成器),返回乙個函式。這個函式執行後,先發出乙個action(requestposts(posttitle)),然後進行非同步操作。拿到結果後,先將結果轉成 json 格式,然後再發出乙個 action(receiveposts(posttitle, json)。返回的是物件而不是函式,就要使用中介軟體redux-thunk

非同步操作的第一種解決方案就是,寫出乙個返回函式的 action creator,然後使用redux-thunk中介軟體改造store.dispatch

6.redux-promise中介軟體。

另一種非同步操作的解決方案,就是讓 action creator 返回乙個 promise 物件。這就需要使用redux-promise中介軟體。這個中介軟體使得store.dispatch方法可以接受 promise 物件作為引數。這時,action creator 有兩種寫法。具體因為不常用不介紹。

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 相當於 至於為什麼要這種格式,...