RTK Query能否跨多轮查询增量更新单个存储对象？

这个需求可以结合RTK Query的现有能力实现，不需要完全放弃RTK Query的优势，也没必要自己手写全部请求逻辑。

最优实现方案：RTK Query + 轻量自定义Slice #

你只需要保留RTK Query处理请求的能力，额外用一个普通Redux Slice存储合并后的全量区域集合即可，步骤如下：

1. 先给你的查询接口配置keepUnusedDataFor: 0，避免不同bbox参数的查询结果堆积在RTK Query缓存中：

// api定义文件
export const mapApi = createApi({
  reducerPath: 'mapApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/your-api-base' }),
  endpoints: (builder) => ({
    getAllRegionsWithinBounds: builder.query({
      query: (params) => ({
        url: '/regions-by-bounds',
        method: 'POST',
        body: params
      }),
      // 每次查询结束后立即清理该参数对应的缓存，不会堆积无用缓存
      keepUnusedDataFor: 0
    })
  })
})

2. 新增一个轻量Slice存储合并后的全量区域集合，提供合并数据的reducer：

// localRegionsSlice.js
import { createSlice } from '@reduxjs/toolkit'

const localRegionsSlice = createSlice({
  name: 'localRegions',
  initialState: [],
  reducers: {
    mergeNewRegions: (state, action) => {
      const newRegions = action.payload
      // 仅新增不存在的区域ID
      newRegions.forEach(regionId => {
        if (!state.includes(regionId)) state.push(regionId)
      })
    }
  }
})

export const { mergeNewRegions } = localRegionsSlice.actions
export default localRegionsSlice.reducer

3. 在组件中监听RTK Query的请求结果，触发合并操作即可：

// 地图组件中
const dispatch = useDispatch()
const localRegions = useSelector(state => state.localRegions)
const allRegionsQuery = useGetAllRegionsWithinBoundsQuery(
  { bbox: mapPolygon },
  { skip: mapPolygon === null }
)

// 请求成功时合并新返回的区域
useEffect(() => {
  if (allRegionsQuery.isSuccess) {
    dispatch(mergeNewRegions(allRegionsQuery.data))
  }
}, [allRegionsQuery.isSuccess, allRegionsQuery.data, dispatch])

你提到的两个方案评估 #

• RTK Query streaming能力完全不适用这个场景，它是为单次请求返回多段数据流的场景设计的，和你的多次独立请求合并结果的需求不匹配。
• 完全手动发起请求的方案没有必要，上面的方案依然保留了RTK Query的核心优势：自动请求去重、自动取消未完成的重复请求、loading/错误状态统一管理，比手写请求的维护成本低很多。

纯RTK Query实现的可能性 #

理论上可以通过自定义缓存key、重写transformResponse等方式实现，但逻辑复杂度远高于上面的方案，没有实际必要。

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