Redux之中介軟體的原理和applyMiddleware、Thunk的實現
阿新 • • 發佈:2019-01-11
現在我們的Redux和React-Redux已經基本實現了,在Redux中,觸發一個action,reducer立即就能算出相應的state,如果我要過一會才讓reducer計算state呢怎麼辦?也就是我們如何實現非同步的action呢?這裡就要用到中介軟體(middleware)
1. 中介軟體(middleware)介紹
中間就是在action與reducer之間又加了一層,沒有中介軟體的Redux的過程是:action -> reducer
,而有了中介軟體的過程就是action -> middleware -> reducer
,使用中介軟體我們可以對action也就是對dispatch方法進行裝飾,我們可以用它來實現非同步action、列印日誌、錯誤報告等功能。
又是裝飾器,沒錯,這塊的好多東西都離不開裝飾器模式,所以,設計模式很重要。
關於中介軟體,有很多框架或者是類庫都使用了中介軟體,像express、koa、mongoose等都有使用。
2. Redux中介軟體的使用
我們可以使用Redux提供的applyMiddleware方法來使用一個或者是多箇中間件,將它作為createStore的第二個引數傳入即可,我們以Redux-Thunk為例
import { createStore, applyMiddleware } from ‘redux‘ import thunk from ‘redux-thunk‘ const store = createStore(counter, applyMiddleware(thunk)) ReactDOM.render( ( <Provider store={store}> <App /> </Provider> ), document.getElementById(‘root‘) )
通過thunk中介軟體,我們就可以實現非同步的action了。
export function addAsync(){
return dispatch => {
setTimeout(() => {
dispatch(add())
}, 2000);
}
}
想要實現中介軟體,我們首先有兩個任務要做:
-
擴充套件createStore方法,使它可以接收第二個引數。
-
applyMiddleware方法的實現。