Redux 中间件机制与 applyMiddleware 源码原理

Redux 中间件机制：

• 中间件通过拦截和增强 dispatch 函数形成链式调用
• 每个中间件接收 ({ getState, dispatch }) 并返回 next => action => { ... }
• 最内层中间件调用原始的 store.dispatch

applyMiddleware 源码原理：

function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState) => {
    const store = createStore(reducer, preloadedState);
    let dispatch = () => {
      throw new Error('中间件构建中不可 dispatch');
    };
    
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action, ...args) => dispatch(action, ...args),
    };
    
    const chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);
    
    return { ...store, dispatch };
  };
}

// compose 实现
function compose(...funcs) {
  if (funcs.length === 0) return (arg) => arg;
  if (funcs.length === 1) return funcs[0];
  return funcs.reduce((a, b) => (...args) => a(b(...args)));
}

执行流程：

dispatch(action)
  → M1(next=store.dispatch)
    → M2(next=M1 的内部 dispatch)
      → M3(next=M2 的内部 dispatch)
        → 原始 store.dispatch
        (返回)
      → M3 的后续
    → M2 的后续
  → M1 的后续

常见中间件：

• redux-thunk：允许 dispatch 函数接收 getState
• redux-logger：打印每次 action 前后状态
• redux-saga：用 Generator 处理副作用