Usage > Usage Without React Hooks: Using RTKQ with other UI frameworks">Usage > Usage Without React Hooks: Using RTKQ with other UI frameworks">
跳至主要内容

不使用 React Hooks 的用法

与 Redux 核心和 Redux Toolkit 一样，RTK Query 的主要功能是与 UI 无关的，可以与任何 UI 层一起使用。RTK Query 还包含一个专门为 React 设计的 createApi 版本，它 自动生成 React Hooks.

虽然 React Hooks 是大多数用户预期使用 RTK Query 的主要方式，但库本身使用纯 JS 逻辑，可以与 React 类组件一起使用，也可以独立于 React 本身使用。

本页介绍了在不使用 React Hooks 的情况下如何与 RTK Query 交互，以便正确使用 RTK Query 的 缓存行为.

添加订阅​

缓存订阅用于告诉 RTK Query 它需要为某个端点获取数据。可以通过分发附加到查询端点的 initiate thunk 操作创建者返回的结果来添加某个端点的订阅。

使用 React hooks 时，此行为将在 useQuery、useQuerySubscription、useLazyQuery 和 useLazyQuerySubscription 中处理。

订阅缓存数据
const promise = dispatch(api.endpoints.getPosts.initiate())
const { refetch } = promise
// interact with the cache in the same way as you would with a useFetch...() hook
const { data, isLoading, isSuccess /*...*/ } = await promise

移除订阅​

移除缓存订阅对于 RTK Query 识别缓存数据不再需要是必要的。这允许 RTK Query 清理并移除旧的缓存数据。

分发查询端点的 initiate thunk 操作创建者返回的结果是一个带有 unsubscribe 属性的 Promise。此属性是一个函数，当调用时，将移除相应的缓存订阅。

使用 React hooks 时，此行为将在 useQuery、useQuerySubscription、useLazyQuery 和 useLazyQuerySubscription 中处理。

取消订阅缓存数据
// Adding a cache subscription
const promise = dispatch(api.endpoints.getPosts.initiate())

// Removing the corresponding cache subscription
promise.unsubscribe()

访问缓存数据和请求状态​

可以使用查询端点的 select 函数属性创建选择器，并使用 Redux 状态调用它来访问缓存数据和请求状态信息。这提供了在调用时缓存数据和请求状态信息的快照。

注意

endpoint.select(arg) 函数创建了一个新的选择器实例 - 它不是实际的选择器函数本身！

使用 React hooks 时，此行为将在 useQuery、useQueryState 和 useLazyQuery 中处理。

访问缓存数据和请求状态
const result = api.endpoints.getPosts.select()(state)
const { data, isSuccess, isError, error } = result

请注意，与自动生成的 hooks 不同，没有 isFetching 标志，并且如果状态为 pending，无论是否已有数据，isLoading 标志都将为 true。

记忆化​

由于 endpoint.select(arg) 函数每次调用都会返回一个新的选择器，并且由于此实例本身已记忆化，因此记忆化选择器的创建可能很有用（例如，然后在另一个选择器中使用该记忆化实例）。这可以使用 createSelector 完成。

创建记忆化选择器创建器
const createGetPostSelector = createSelector(
  (id: string) => id,
  (id) => api.endpoints.getPost.select(id),
)

const selectGetPostError = createSelector(
  (state: RootState) => state,
  (state: RootState, id: string) => createGetPostSelector(id),
  (state, selectGetPost) => selectGetPost(state).error,
)

执行变异​

变异 用于更新服务器上的数据。变异可以通过调度附加到变异端点的 initiate thunk 操作创建器结果来执行。

使用 React hooks 时，此行为将在 useMutation 中处理。

触发变异端点
dispatch(api.endpoints.addPost.initiate({ name: 'foo' }))

示例​

以下内容提供了不使用 React hooks 的使用示例：

更多信息​

最后更新于