持久性與重新水化

RTK Query 支援透過 extractRehydrationInfo 選項在 createApi 上重新水化。此函式會傳遞每個已發送的動作，並且當它傳回的值不為 undefined 時，該值會用於重新水化已完成和發生錯誤的查詢的 API 狀態。

另請參閱 伺服器端渲染。

資訊

一般來說，不建議保留 API 片段，而應該在瀏覽器中使用 Cache-Control 標頭 等機制來定義快取行為。保留和重新水化 API 片段可能會讓使用者在一段時間沒有造訪頁面時，始終看到非常過時的資料。儘管如此，在原生應用程式等環境中，由於沒有瀏覽器快取來處理這項工作，保留資料仍然可能是一個可行的選項。

Redux Persist

API 狀態重新水化可以使用 Redux Persist，方法是利用從 redux-persist 匯入的 REHYDRATE 動作類型。當持續化根部簡化器，或僅持續化 api 簡化器時，這可以使用 autoMergeLevel1 或 autoMergeLevel2 狀態調解器 開箱即用。

TypeScript

redux-persist 重新水化範例

import type { Action } from '@reduxjs/toolkit'
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { REHYDRATE } from 'redux-persist'

type RootState = any // normally inferred from state

function isHydrateAction(action: Action): action is Action<typeof REHYDRATE> & {
  key: string
  payload: RootState
  err: unknown
} {
  return action.type === REHYDRATE
}

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // to prevent circular type issues, the return type needs to be annotated as any
  extractRehydrationInfo(action, { reducerPath }): any {
    if (isHydrateAction(action)) {
      // when persisting the api reducer
      if (action.key === 'key used with redux-persist') {
        return action.payload
      }

      // When persisting the root reducer
      return action.payload[api.reducerPath]
    }
  },
  endpoints: (build) => ({
    // omitted
  }),
})

JavaScript

redux-persist 重新水化範例

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { REHYDRATE } from 'redux-persist'

function isHydrateAction(action) {
  return action.type === REHYDRATE
}

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // to prevent circular type issues, the return type needs to be annotated as any
  extractRehydrationInfo(action, { reducerPath }) {
    if (isHydrateAction(action)) {
      // when persisting the api reducer
      if (action.key === 'key used with redux-persist') {
        return action.payload
      }

      // When persisting the root reducer
      return action.payload[api.reducerPath]
    }
  },
  endpoints: (build) => ({
    // omitted
  }),
})