如何使用Redux Toolkit Query获取单个条目并保留结果数组展示列表

核心思路 #

RTK Query采用文档缓存机制，每个单用户请求都会生成独立的缓存条目。我们可以并行触发多个单用户查询，再把成功返回的结果整合成数组，直接用来渲染列表。

具体实现步骤 #

1. 定义单用户查询的API切片 #

先创建一个根据用户名获取用户信息的接口，参数为目标用户名：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const githubApi = createApi({
  reducerPath: 'githubApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.github.com/' }),
  endpoints: (builder) => ({
    getUser: builder.query({
      query: (username) => `users/${username}`,
    }),
  }),
});

export const { useGetUserQuery } = githubApi;

2. 在组件中批量请求并整合结果 #

拿到用户输入的账号列表后，逐个调用查询钩子，再筛选出成功的数据组成数组：

import { useGetUserQuery } from './githubApi';

function UserList({ usernames }) {
  // 对每个用户名发起查询，存储所有查询状态
  const userQueries = usernames.map(username => useGetUserQuery(username));
  
  // 提取所有成功返回的用户数据
  const userList = userQueries
    .filter(query => query.isSuccess)
    .map(query => query.data);

  // 处理全局加载状态
  if (userQueries.some(query => query.isLoading)) {
    return <div>加载中...</div>;
  }
  // 处理错误状态
  if (userQueries.some(query => query.isError)) {
    return <div>部分用户信息加载失败</div>;
  }

  // 渲染用户列表
  return (
    <ul>
      {userList.map(user => (
        <li key={user.id}>
          <img src={user.avatar_url} alt={user.login} width="50" />
          <span>{user.login}</span>
        </li>
      ))}
    </ul>
  );
}

3. 实用优化点 #

• 缓存复用：RTK Query会自动缓存每个用户名的查询结果，再次查询同一账号时直接调用缓存，无需重复发起请求。
• 请求防抖：如果是用户实时输入添加账号的场景，可以添加防抖逻辑，避免频繁触发不必要的请求。

为什么这是最优简便方案 #

• 无需额外封装复杂的批量请求逻辑，直接利用RTK Query的文档缓存特性，每个请求独立管理状态，维护成本更低。
• 组件内直接整合结果数组，逻辑清晰，完全贴合RTK Query的使用习惯。
• 缓存、加载、错误状态均由RTK Query自动处理，减少冗余代码编写。

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