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方法的實現。