在 Redux 的世界里，中间件是一种强大的工具，它允许你在 action 分发前后插入自定义逻辑。今天，我们将深入探讨如何手写一个 Redux 中间件，并通过详细的示例和实现原理，带你领略其中的奥秘。

一、手写日志中间件

首先，我们来看一个简单的日志中间件示例。这个中间件会在 action 分发前后记录相关信息，帮助我们调试和理解应用的状态变化。

const loggerMiddleware = (store) => {
  return next => action => {
    // 记录触发前的状态
    console.log('dispatching action:', action);
    console.log('current state:', store.getState());

    // 将 action 传递给下一个中间件或 reducer
    const result = next(action);

    // 记录处理后的新状态
    console.log('next state:', store.getState());

    // 返回处理结果（通常是 action 本身）
    return result;
  };
};

使用这个中间件时，我们需要将它应用到 Redux store 上：

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

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

二、中间件结构解析

Redux 中间件的结构非常清晰，采用三层嵌套函数结构：

const middleware = (store) => {
  return next => action => {
    // 中间件逻辑
  };
};

• 外层函数 middleware：接收包含 dispatch 和 getState 方法的 store 对象。
• 中层函数 next：接收链中下一个中间件的 dispatch 方法（如果是最后一个中间件，则 next 指向原始 store.dispatch）。
• 内层函数 action：处理 action 的逻辑。

三、高级中间件示例：异步处理

接下来，我们来看一个实现类似 Redux-thunk 的异步处理能力的中间件示例：

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

  return next(action);
};

使用这个中间件时，我们可以分发一个异步 action：

dispatch((dispatch) => {
  setTimeout(() => {
    dispatch({ type: 'ASYNC_ACTION' });
  }, 1000);
});

四、核心实现要点

• 链式调用：每个中间件通过 next() 将 action 传递给下一个中间件。

• 两种 dispatch 区别：

  • next(action)：传递给后续中间件。
  • store.dispatch(action)：重新走完整中间件链。

• 状态获取时机：

  • store.getState() 在 next() 前获取当前状态。
  • store.getState() 在 next() 后获取新状态。

• 中间件执行流程图：

原始 dispatch
↓
中间件1(处理 action)
↓ next()
中间件2(处理 action)
↓ next()
...
↓
原始 reducer 处理

通过这种机制，中间件可以：

• 修改/拦截 action。
• 添加异步逻辑。
• 记录状态变化。
• 实现撤销重做等高级功能。

希望这篇文章能帮助你更好地理解 Redux 中间件的工作原理，并能够手写自己的中间件来扩展 Redux 的功能。