如何将 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

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

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

如何确保 tokenFetch 和 tokenRefresh 都将数据推送到 redux 状态的同一部分，以及如何在 api 调用之外注入 reducer删除那个状态？

Answer 1

RTK 文档有一个示例 saving an auth token to the side with extraReducers。

我认为这显示了您想要的大部分内容 - 通过在 extraReducers 中使用端点的 fulfilled 操作，将令牌保存在您可以随意操作的额外切片中.

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

除此之外，您可能还想 wrap your baseQuery for automatic re-authentication。

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

How to mix RTK Query apiSlice reducers with regular RTK reducers?

reactjs

redux

redux-toolkit

rtk-query