關(guān)于 Redux 中間件

Ryan_Li 發(fā)布于2019-08-20 13:50 / 1564人閱讀

摘要：的中間件是定義一個函數(shù)，對進行改造，在發(fā)出與執(zhí)行之間添加其他功能。

Redux 的中間件是定義一個函數(shù)，對 dispatch 進行改造，在發(fā)出 action 與執(zhí)行 reducer 之間添加其他功能。這是對 Redux 進行功能拓展的方式。

Redux 如何支持中間件？

applyMiddlewares()

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];
    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);
    return {...store, dispatch}
  }
}

middleware => middleware(middlewareAPI)

每個 middleware 將能訪問 getState 與 dispatch，同時可以知道該 middleware 為高階函數(shù)，執(zhí)行返回一個函數(shù)

compose()

dispatch = compose(...chain)(store.dispatch);

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  const last = funcs[funcs.length - 1]
  const rest = funcs.slice(0, -1)
  return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}

(composed, f) => f(composed)
即:
middleware({getState, dispatch})(store.dispatch)
該函數(shù)為高階函數(shù)，執(zhí)行返回一個函數(shù)

分析至此，一個 middleware 函數(shù)大致為：

（{getState, dispatch}）=> (next) => (action) => {
    // next 即 store.dispatch
    //...在此拓展功能
    action() // action, 這個action執(zhí)行觸發(fā)dispath??
 }

Action 如何與Dispatch聯(lián)系起來？

action 通過 bindActionCreator 與 dispatch 聯(lián)系起來

bindActionCreator()

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

(...args) => dispatch(actionCreator(...args))

由 actionCreator 可以知道 actionCreator 為高階函數(shù)，執(zhí)行返回一個函數(shù)

所以一個 action 的姿勢應(yīng)該為：

()=> () => {
   type: "",
   payload
}

舉例：redux-thunk 中間件

源碼：

function thunkMiddleware({ dispatch, getState }) {
  return next => action =>
    typeof action === "function" ?
      action(dispatch, getState) :
      next(action);
}

action 怎么寫？

funciton fetchSomething(){
    return (dispatch, getState)=>{
        fetch().then((res)=>{  
            disatch({
                type: "FETCH_SOMETHING_DONE"
                palyload
            })
        })
    }
}

參考：

Redux Middleware Doc