使用 RTK 查询时与存储在 Redux 状态中的其他属性发生混淆

Question

我已经使用 Redux Toolkit 一段时间了，其中异步 thunk 使用 Axios 进行调用。我发现在

dispatch

中调用 thunk 可以直接将我的响应保存在商店中，这样我就可以在整个应用程序中的任何地方使用它，这非常方便。 然而，这种方法总是需要手动加载状态和错误处理。

最近，我听说了有关 RTK Query 的好消息，特别是它提供的加载和错误状态，以及不再需要 Axios 的额外好处，这是捆绑包中少了一个库。

自从我开始更多地使用 RTK 查询以来，有些方面对我来说没有意义。例如，与 asyncThunk 类似，RTK Query 将返回的数据保存到存储中，但它还存储了很多我并不真正需要的其他属性。

如果我想访问从API获取的数据，我必须这样获取吗？

const data = useSelector((state: any) => state.todoAPI.queries.getTodos);

这看起来像是为了获取 API 调用的响应而进行的大量对象钻探。最重要的是，我不需要像

status

、

startedTimestamp

和

fulfilledTimestamp

这样的数据存储在 Redux 存储中。为什么我必须在州内携带这些？

有没有一种方法可以简化对响应数据的访问并避免在状态中存储不必要的属性？任何指导或最佳实践将不胜感激！

Answer 1

如果我想访问从 API 获取的数据，我是否必须获取 像这样吗？

const data = useSelector((state: any) => state.todoAPI.queries.getTodos);

这似乎是为了获得响应而进行的大量对象钻探 API 调用。最重要的是，我不需要状态等数据， startedTimestamp 和 fulledTimestamp 存储在 Redux 存储中。

是的，虽然 API 切片构建在

createSlice

和

createAsyncThunk

之上，并且所有端点数据都存储在存储中，但 不是 您 手动选择该状态。 RTKQ 使用它来管理端点订阅。将大多数 API 切片状态视为只是实现细节。

Redux-Toolkit Query 导出一个 React 模块，其中包括为每个端点定义自动生成 React hook，有关详细信息，请参阅API Slices：React Hooks。

基本的变化是从

createApi

导入

"@reduxjs/toolkit/query/react"

，而不是常规的

"@reduxjs/toolkit/query"

导出。

确保导入：

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

从您的

todoAPI

切片确保您访问并导出生成的挂钩。

示例：

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

export const todoApi = createApi({
  ...
  endpoints: builder => ({
    ...
    getTodos: builder.query({
      ...
    }),
    ...
  }),
});

export const {
  ...
  useGetTodosQuery,
  useLazyGetTodosQuery,
  ...
} = todoApi;

导入并使用生成的钩子，现在钩子不再从存储中手动选择查询状态，而是直接返回该数据（在所有相关元数据中，例如加载/获取/成功/错误/等）。

const { data } = useGetTodosQuery();
// or
const { data } = todoApi.useGetTodosQuery();

const [trigger, { data }] = useLazyGetTodosQuery();
//or
const [trigger, { data }] = todoApi.useLazyGetTodosQuery();