关于 Redux 中间件

Redux 的中间件是定义一个函数，对 dispatch 进行改造，在发出 action 与执行 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 为高阶函数，执行返回一个函数

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)
该函数为高阶函数，执行返回一个函数

分析至此，一个 middleware 函数大致为：

（{getState, dispatch}）=> (next) => (action) => {
    // next 即 store.dispatch
    //...在此拓展功能
    action() // action, 这个action执行触发dispath??
 } 

Action 如何与Dispatch联系起来？

action 通过 bindActionCreator 与 dispatch 联系起来

bindActionCreator()

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

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

由 actionCreator 可以知道 actionCreator 为高阶函数，执行返回一个函数

所以一个 action 的姿势应该为：

()=> () => {
   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