如何将 RTK Query apiSlice 减速器与常规 RTK 减速器混合使用？

Question

我正在将一些旧的 Redux 操作从原来的定制应用程序迁移到 RTK 查询，但我遇到了一个问题，这可能只是我对 RTK 查询缺乏了解。

我有一个 apiSlice 如下

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { AUTH_SERVER, CLIENT_ID, REDIRECT_URI } from 'app/config'

const api = createApi({
  reducerPath: 'auth',
  baseQuery: fetchBaseQuery({
    baseUrl: `https://${AUTH_SERVER}`
  }),
  endpoints: builder => ({
    tokenFetch: builder.query({
      query: ({ code, code_verifier }) => ({
        url: '/oauth/token',
        method: 'POST',
        body: {
          grant_type: 'authorization_code',
          client_id: CLIENT_ID,
          code_verifier,
          code,
          redirect_uri: REDIRECT_URI
        }
      })
    }),
    tokenRefresh: builder.query({
      query: ({ refresh_token }) => ({
        url: '/oauth/token',
        method: 'POST',
        body: {
          grant_type: 'refresh_token',
          client_id: CLIENT_ID,
          refresh_token
        }
      })
    })
  })
})

export const { useTokenFetchQuery, useTokenRefreshQuery } = api

export default api

我有三个问题目前无法解决：

1. 我想在浏览器中保留用户的身份验证令牌（在原始应用程序中使用 redux-persist 中间件 - 不确定如何在此处集成）
2. 我需要 tokenRefresh 的结果来覆盖原始 tokenFetch api 调用（目前它们是独立存储的），并且
3. 我需要处理tokenInvalidate 操作，带有一个reducer，可以简单地重置身份验证状态。 （我看不出如何将其他减速器注入到此 apiSlice 中）

如何确保 tokenFetch 和 tokenRefresh 都将数据推送到 redux 状态的同一部分，除了 api 调用之外，如何注入一个减速器来擦除该状态？

Answer 1

RTK 文档有一个 将身份验证令牌保存到一边的示例额外的减速器。

我认为这显示了您想要的大部分内容 - 通过使用 extraReducersfulfilled 操作，将令牌保存到您可以随意操作的额外切片中的一侧>。

此外，它还展示了如何在 baseQuery 的 prepareHeaders 中使用该令牌。

除此之外，您可能还需要 包装您的基本查询以进行自动重新身份验证。