react-slingshot 状态管理中间件开发指南：自定义 Redux 中间件

【免费下载链接】react-slingshot React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in 项目地址: https://gitcode.com/gh_mirrors/re/react-slingshot

1. 理解 Redux 中间件架构

Redux 中间件是处理异步操作和副作用的核心机制，在 react-slingshot 项目中，中间件配置位于 src/store/configureStore.js 文件。该文件通过 applyMiddleware 函数组合了 redux-thunk 和路由中间件，形成了完整的状态处理管道。

// 生产环境中间件配置
const middlewares = [
  thunk,                  // 异步操作处理
  reactRouterMiddleware   // 路由状态同步
];

2. 自定义中间件开发步骤

2.1 创建基础中间件结构

在 src/store/ 目录下新建 middleware/loggerMiddleware.js 文件，实现一个简单的日志中间件：

const loggerMiddleware = store => next => action => {
  console.groupCollapsed(`[${new Date().toISOString()}] ${action.type}`);
  console.log('Previous state:', store.getState());
  console.log('Action:', action);
  
  const result = next(action);  // 传递 action 到下一个中间件
  
  console.log('Next state:', store.getState());
  console.groupEnd();
  return result;
};

export default loggerMiddleware;

2.2 集成到现有系统

修改 src/store/configureStore.js 文件，导入并添加自定义中间件：

// 导入自定义中间件
import loggerMiddleware from './middleware/loggerMiddleware';

// 在开发环境中间件数组中添加
const middlewares = [
  reduxImmutableStateInvariant(),
  thunk,
  reactRouterMiddleware,
  loggerMiddleware  // 新增自定义日志中间件
];

3. 高级中间件模式实现

3.1 异步请求中间件

创建 API 请求中间件 src/store/middleware/apiMiddleware.js，统一处理网络请求：

const apiMiddleware = store => next => action => {
  if (action.type !== 'API_REQUEST') return next(action);
  
  const { url, method, onSuccess, onError } = action.payload;
  
  fetch(url, { method })
    .then(res => res.json())
    .then(data => store.dispatch({ type: onSuccess, payload: data }))
    .catch(error => store.dispatch({ type: onError, payload: error }));
    
  return next(action);
};

export default apiMiddleware;

3.2 与 Redux 工作流集成

在燃料节省计算器功能中，src/actions/fuelSavingsActions.js 使用了 thunk 中间件处理异步逻辑：

// 异步 action 创建器示例
export function saveFuelSavings(settings) {
  return function (dispatch) {
    // 这里可以添加 API 调用逻辑
    return dispatch({
      type: types.SAVE_FUEL_SAVINGS,
      dateModified: getFormattedDateTime(),
      settings
    });
  };
}

4. 中间件调试与测试

4.1 使用 Redux DevTools

react-slingshot 已集成 Redux DevTools，在 src/store/configureStore.js 中通过以下代码启用：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

4.2 单元测试策略

为中间件创建测试文件 src/store/middleware/loggerMiddleware.spec.js：

import loggerMiddleware from './loggerMiddleware';

describe('loggerMiddleware', () => {
  it('should log action and state changes', () => {
    const mockStore = { getState: () => ({ fuelSavings: {} }) };
    const mockNext = jest.fn();
    const mockAction = { type: 'TEST_ACTION' };
    
    loggerMiddleware(mockStore)(mockNext)(mockAction);
    
    expect(mockNext).toHaveBeenCalledWith(mockAction);
  });
});

5. 最佳实践与性能优化

5.1 中间件优先级排序

在 src/store/configureStore.js 中，中间件执行顺序为数组声明顺序：

// 推荐顺序：日志 → 异步 → 状态验证 → 路由
const middlewares = [
  loggerMiddleware,  // 最先执行：记录所有操作
  apiMiddleware,     // 其次：处理 API 请求
  thunk,             // 核心：异步逻辑处理
  reduxImmutableStateInvariant() // 最后：状态验证
];

5.2 条件加载中间件

根据环境动态加载中间件：

const middlewares = [thunk, reactRouterMiddleware];

// 仅开发环境加载调试中间件
if (process.env.NODE_ENV !== 'production') {
  middlewares.push(reduxImmutableStateInvariant(), loggerMiddleware);
}

6. 实际案例：燃料节省计算器中的中间件应用

在燃料节省计算器功能中，中间件协同工作流程如下：

1. 用户输入触发 src/components/FuelSavingsForm.js 中的事件处理
2. calculateFuelSavings 动作通过 src/actions/fuelSavingsActions.js 分发
3. Redux 中间件链处理动作：
   • 日志中间件记录状态变更
   • thunk 处理可能的异步计算
   • 状态验证中间件检查数据完整性
4. 最终状态更新反映在 src/components/FuelSavingsResults.js 中

通过自定义中间件，开发者可以轻松扩展 react-slingshot 的状态管理能力，实现复杂业务逻辑与副作用处理。

图：react-slingshot 中间件工作流程图

7. 扩展学习资源

• 官方中间件文档：Redux 中间件文档
• 项目 reducer 示例：src/reducers/fuelSavingsReducer.js
• 异步操作示例：src/actions/fuelSavingsActions.js

【免费下载链接】react-slingshot React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in 项目地址: https://gitcode.com/gh_mirrors/re/react-slingshot