1. 程式人生 > >Redux之中介軟體的原理和applyMiddleware、Thunk的實現

Redux之中介軟體的原理和applyMiddleware、Thunk的實現

現在我們的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);
  }
}

想要實現中介軟體,我們首先有兩個任務要做:

  1. 擴充套件createStore方法,使它可以接收第二個引數。

  2. applyMiddleware方法的實現。