Redux入門0x105 redux 中介軟體

2021-09-13 10:58:56 字數 1361 閱讀 7155

前一章講了reduxaction creator,這一章講redux中很神奇的中介軟體。

在專案中,我們經常會有記錄一些事件或者在某些事件發生的時候做某些事的需求,比如api介面鑑權操作、日誌記錄操作等,一般我們都可以用中介軟體來完成,中介軟體具有可拔插、可擴充套件的特點。我們也可以使用中介軟體來擴充套件redux的功能。

前面寫了乙個
const before = store => storedispatch => action => 

const after = store => storedispatch => action =>

store.dispatch(increment())

const before = store => storedispatch => action => 

const after = store => storedispatch => action =>

const asyncaction=()=>,1000)

}}const asyncmiddleware = store => storedispatch => action => else

}store.dispatch(asyncaction())

這裡寫了乙個asyncmiddleware,他判斷傳入的action是否是乙個函式,如果是乙個函式,那就直接執行這個函式,同時將dispatch作為引數,則在asyncaction我們就能直接訪問到dispatch了,就可以在asyncaction適當的時候再次dispatch了。

當然一樣的,這樣的中介軟體也已經存在了:redux-thunk,日誌的中介軟體也已經存在了:redux-logger

import thunkmiddleware from 'redux-thunk'

import from 'redux-logger'

const store = createstore(

counter,

thunkmiddleware,

createlogger()

))store.dispatch(increment())

檢視效果

SpringBoot入門0x002 URL 對映

將某個http請求對映到某個方法上 這個註解可以加在某個controller或者某個方法上,如果加在controller上,則這個controller中的所有路由對映都將會加上這個字首 下面會有栗子 如果加在方法上,則沒有字首 下面也有栗子 首先編寫controller,controller頭部的 ...

CSS入門 0x6 css編碼技巧

人眼觀察會有視差,在設計的時候應該按怎麼看起來像想要的效果,而不是怎麼算出來是想要的效果。常見的實踐是用解析度來測試,利用 查詢設計規則,但是每個 查詢都會增加成本。應該科學設定 查詢的斷點,它不是由具體裝置決定,而是由設計自身決定。可以用下面技巧來減少 查詢 總的來說,我們的思路是盡最大努力實現彈...

React入門0x004 jsx 和資料渲染

在react中,渲染資料的形式有多種多樣,但是萬變不離其中,都是用js。渲染文字 reactdom.render 這是乙個文字 使用babel轉義 babel plugins transform react jsx index.js reactdom2.default.render react2.d...