React与Redux：自定义中间件管理的最佳实践咨询

嘿，这个问题问得太实在了——当自定义中间件多到把store文件撑得臃肿不堪时，确实得好好梳理下代码组织的逻辑。直接把所有中间件一股脑塞进applyMiddleware里虽然能正常运行，但绝对不是最佳实践，把中间件抽离到单独文件的集合中再导入使用才是更符合Redux代码规范和可维护性要求的做法，具体原因和示例如下：

为什么要抽离中间件？ #

• 保持store文件的职责单一：Store文件的核心任务应该是创建和配置Redux store，而不是被一堆中间件的导入、展开代码占满。抽离后，store文件会变得简洁清爽，一眼就能看清核心配置逻辑，不会显得杂乱。
• 提升中间件的可维护性：如果后续要修改某个中间件的逻辑，或者新增/移除中间件，直接去对应的中间件文件或者中间件集合文件操作就行，不用动store文件。而且还能把功能相关的中间件分组管理（比如把异步请求相关的放一组，日志监控的放一组），逻辑边界更清晰。
• 便于复用和测试：抽离后的中间件可以在不同环境的store配置中复用（比如开发环境和生产环境用不同的中间件组合），也更容易单独对中间件进行单元测试，不用依赖整个store的创建逻辑。

具体实现示例 #

1. 创建中间件集合文件 #

先在项目里新建一个middleware目录，然后创建middleware/index.js来统一导出所有中间件：

// middleware/index.js
// 导入各个单独的中间件文件
import loggerMiddleware from './loggerMiddleware';
import authMiddleware from './authMiddleware';
import asyncRequestMiddleware from './asyncRequestMiddleware';
import errorHandlingMiddleware from './errorHandlingMiddleware';

// 统一组合中间件，也可以根据环境做动态调整
const baseMiddleware = [
  authMiddleware,
  asyncRequestMiddleware,
  errorHandlingMiddleware
];

// 开发环境额外添加日志中间件
export const appMiddleware = process.env.NODE_ENV === 'development'
  ? [...baseMiddleware, loggerMiddleware]
  : baseMiddleware;

2. 在store文件中导入使用 #

现在store文件就会非常简洁：

// store.js
import { createStore, compose, applyMiddleware } from 'redux';
import reducers from './reducers';
// 直接导入统一的中间件集合
import { appMiddleware } from './middleware';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store = createStore(
  reducers,
  composeEnhancers(
    applyMiddleware(...appMiddleware)
  )
);

这样一来，不管后续新增多少中间件，store文件都不会变得臃肿，所有中间件的管理都集中在middleware目录下，维护起来轻松很多。

内容的提问来源于stack exchange，提问作者tim_woods