当前位置：首页 > JavaScript

js实现applyMiddleWare

2026-04-06 17:58:01JavaScript

实现中间件机制的基本思路

中间件机制的核心是创建一个函数链，每个中间件可以访问请求对象、响应对象以及下一个中间件函数。通过组合这些函数，实现对请求的层层处理。

function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState) => {
    const store = createStore(reducer, preloadedState)
    let dispatch = store.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)))
}

中间件的编写规范

每个中间件应该遵循特定的格式，接收包含getState和dispatch方法的对象，返回一个接收next方法的函数，最后返回一个能处理action的函数。

const loggerMiddleware = ({ getState }) => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', getState())
  return result
}

使用示例

将多个中间件应用到Redux store的创建过程中，实现对dispatch功能的增强。

import { createStore } from 'redux'
import rootReducer from './reducers'

const store = createStore(
  rootReducer,
  applyMiddleware(loggerMiddleware, thunkMiddleware)
)

异步中间件的实现

处理异步action的中间件需要检查action类型，如果是函数则执行它，否则传递给下一个中间件。

const thunkMiddleware = ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
    return action(dispatch, getState)
  }
  return next(action)
}

错误处理中间件

可以在中间件链中添加错误处理逻辑，捕获并处理action处理过程中抛出的异常。

js实现applyMiddleWare

const errorHandlerMiddleware = ({ dispatch }) => next => action => {
  try {
    return next(action)
  } catch (err) {
    console.error('Caught an exception!', err)
    dispatch({ type: 'ERROR', error: err })
    throw err
  }
}