Redux Toolkit中RTK Query的onQueryStarted重复触发问题解析

问题现象

在使用Redux Toolkit的RTK Query进行数据管理时，开发者可能会遇到一个奇怪的现象：onQueryStarted生命周期钩子会被意外地触发两次。这通常会导致乐观更新（optimistic update）逻辑出现错误，例如在计数器更新时，预期的减1操作变成了减2。

问题根源

经过深入分析，发现这类问题通常是由于Redux store配置中意外地重复添加了相同的RTK Query中间件导致的。具体表现为：

1. 开发者创建了一个基础API切片（baseApiSlice），用于集中管理所有API端点
2. 其他模块的API切片通过injectEndpoints注入到这个基础切片中
3. 在store配置时，不仅添加了基础API切片的中间件，还错误地添加了某个子模块API切片的中间件

这种配置会导致RTK Query的中间件被注册两次，进而使得每个查询操作都会被处理两次，包括onQueryStarted回调。

解决方案

1. 检查store配置

确保store的middleware配置中只包含基础API切片的中间件，不要重复添加子模块的中间件。正确的配置应该是：

const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
})

2. 使用Redux Toolkit 2.7.0+版本

Redux Toolkit团队已经意识到这个问题，并在2.7.0版本中增加了开发模式下的检查机制。当检测到重复的中间件时，系统会抛出明确的错误信息，帮助开发者快速定位问题。

最佳实践

1. 单一中间件原则：确保每个RTK Query API切片只被添加一次到store中间件中
2. 模块化设计：使用一个基础API切片集中管理所有端点，避免分散配置
3. 版本升级：尽可能使用Redux Toolkit 2.7.0或更高版本，利用其内置的重复中间件检测功能
4. 代码审查：在团队协作中，特别注意store配置的变更，防止重复添加中间件

总结

RTK Query的onQueryStarted重复触发问题看似神秘，实则源于中间件的重复注册。通过规范store配置和利用新版Redux Toolkit的检测功能，可以彻底避免这类问题。理解Redux中间件的工作原理对于构建稳定可靠的Redux应用至关重要。