持久化和重新水化

RTK Query通过createApi上的extractRehydrationInfo选项支持重新水化。这个函数会传递每一个派发的动作，当它返回一个不是undefined的值时，该值将被用来重新水化API状态，用于已完成和出错的查询。

另请参见服务器端渲染。

信息

一般来说，不推荐持久化API切片，而应该在浏览器中使用像Cache-Control Headers这样的机制来定义缓存行为。如果用户长时间没有访问页面，持久化和重新水化api切片可能会让用户始终看到非常陈旧的数据。然而，在像原生应用这样的环境中，由于没有浏览器缓存来处理这个问题，持久化可能仍然是一个可行的选项。

Redux Persist

API状态重新水化可以与Redux Persist一起使用，通过利用从redux-persist导入的REHYDRATE动作类型。当持久化根reducer时，可以直接使用autoMergeLevel1或autoMergeLevel2状态调和器，或者当只持久化api reducer时，可以使用autoMergeLevel1调和器。

redux-persist重新水化示例
import type { Action } from '@reduxjs/toolkit'
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { REHYDRATE } from 'redux-persist'

type RootState = any // 通常从状态推断

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: '/' }),
  // 为了防止循环类型问题，返回类型需要注解为any
  extractRehydrationInfo(action, { reducerPath }): any {
    if (isHydrateAction(action)) {
      // 当持久化api reducer时
      if (action.key === 'key used with redux-persist') {
        return action.payload
      }

      // 当持久化根reducer时
      return action.payload[api.reducerPath]
    }
  },
  endpoints: (build) => ({
    // 省略
  }),
})

持久化和重新水化

Redux Persist​

Redux Persist