Redux Toolkit中如何优雅处理列表查询与单项数据获取

问题背景

在使用Redux Toolkit Query(RTK Query)进行数据管理时，开发者经常会遇到一个典型场景：从列表数据中获取单个项目详情。本文将以一个React Native应用为例，深入分析这个问题及其解决方案。

核心问题分析

假设我们有一个应用场景：

1. 一个"群组详情"页面，展示群组信息和相关支出列表，支持排序参数
2. 一个"支出详情"页面，展示单个支出的详细信息

技术实现上，我们可能会这样设计API：

getGroupDetails: builder.query<GroupDetailsResponse, {id: string, sort?: Sort}>({
    query: ({id, sort}) => ({
        url: `groups/${id}`,
        params: {
            ...sort && {sort: `${sort.key},${sort.direction}`}
        }
    })
})

在群组详情页面使用：

const {data: group} = useGetGroupDetailsQuery({id, sort});

在支出详情页面尝试复用数据：

const {expense} = useGetGroupDetailsQuery({id: groupId}, {
    selectFromResult: ({data}) => ({
        expense: data?.expenses.find((expense) => expense.id === expenseId)!,
    }),
})

问题本质

这里的关键问题在于RTK Query的缓存机制：相同的查询参数对应相同的缓存条目。当群组详情页面使用特定排序参数获取数据后，支出详情页面如果不提供相同的排序参数，就无法访问到正确的缓存数据。

解决方案

方案1：参数一致性

确保所有使用相同查询的地方都传递相同的参数。可以通过以下方式实现：

1. 参数传递：将排序参数通过路由或上下文传递到子页面
2. 状态管理：将查询参数存储在Redux store中统一管理

// 使用Redux存储查询参数
const arg = useSelector(selectArg);
const { data } = useMyQuery(arg);

方案2：默认参数处理

在API定义中设置默认参数，确保即使不传参也能命中缓存：

serializeQueryArgs: ({queryArgs}) => {
    return {id: queryArgs.id, sort: queryArgs?.sort || DEFAULT_SORT}
},

最佳实践建议

1. 参数设计：在设计API端点时，考虑参数的必选/可选性
2. 缓存策略：理解RTK Query的缓存机制，合理设计查询参数
3. 状态共享：对于跨组件共享的查询参数，考虑使用状态管理
4. 默认值处理：对于可选参数，