中間件

時間 2021-01-02

標籤 html redux 框架 koa 異步 async 函數 post spa code 欄目 HTML 简体版

原文原文鏈接

什麼是中間件？
中間件就是插在源到目標之間的一段邏輯（通常爲函數，好比redux）html

redux中源爲頁面，目標爲store中的state，經過dispatch將頁面中的數據反映到store中redux

koa中源爲request，目標爲response，框架

redux中在dispatch數據到store只調用了dispatch這個函數，因此只能對這個函數進行改造，中間去插入中間件。koa

爲何redux須要中間件？
dispatch函數第一句話：異步

if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
          'Use custom middleware for async actions.'
      )
    }

isPlainObject函數的目的是檢查action是否是對象字面量或者new object()構造出來的對象，其餘的好比action爲函數，redux直接報錯。好比異步請求，須要將從接口請求到的數據放到redux。
咱們能夠直接發起異步請求，而後將數據dispacth到redux裏
redux@4.0.0 shopping-cart actions/index.jsasync

export const checkout = products => (dispatch, getState) => {
  const { cart } = getState()

  dispatch({
    type: types.CHECKOUT_REQUEST
  })
  shop.buyProducts(products, () => {
    dispatch({
      type: types.CHECKOUT_SUCCESS,
      cart
    })
  })
}

爲了統一寫異步請求，將請求函數放在一個文件裏，這樣不會顯得雜亂。可是dispatch跟getState怎麼拿到，connect後能夠拿到dispatch，getState拿不到，只能經過mapStateToProps傳遞state.這麼操做比較麻煩，在中間件中統一處理就不須要每次調用傳遞dispatch getState。怎麼對一個函數函數改造插入中間件？函數

深刻理解洋蔥模型中間件機制
 Koa 框架教程post