js实现applyMiddleWare
applyMiddleware 的实现原理
applyMiddleware 是 Redux 中的一个核心函数，用于将中间件应用到 store 的 dispatch 方法上。中间件可以在 action 被 dispatch 之前或之后执行自定义逻辑。
基本实现思路
- 接收多个中间件作为参数
- 返回一个 store enhancer 函数
- 在 enhancer 中创建 store 并增强 dispatch 方法
- 通过中间件链式调用实现功能组合
代码实现示例
function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState) => {
const store = createStore(reducer, preloadedState)
let dispatch = () => {
throw new Error(
'Dispatching while constructing your middleware is not allowed.'
)
}
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)))
}中间件结构示例
一个典型的中间件结构如下：
const middleware = (store) => (next) => (action) => {
// 在 action 被 dispatch 前执行的逻辑
const result = next(action)
// 在 action 被 dispatch 后执行的逻辑
return result
}使用示例
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
const store = createStore(
rootReducer,
applyMiddleware(thunk, logger)
)关键点说明
- 中间件接收 store API 作为参数，返回一个函数
- 返回的函数接收 next 参数（下一个中间件或原始 dispatch）
- 最终返回一个接收 action 的函数
- 中间件可以修改、延迟、忽略或停止 action 的传递
- compose 函数将多个中间件组合成单一函数调用链
错误处理
实现时需要注意错误处理，特别是在中间件构造期间避免 dispatch 调用，防止无限循环或其他意外行为。
