当我将 RTK 查询与 redux-persist 结合使用时会发生什么？

Question

当我将 Redux Toolkit Query 与 redux-persist 结合使用时会发生什么？

它会使用持久状态还是会重新获取状态？

Answer 1

现在有一个官方指南。在撰写本文时，您可以这样配置：

// store.ts
import { configureStore, combineReducers } from '@reduxjs/toolkit'
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import AsyncStorage from '@react-native-async-storage/async-storage'

import someSlice from 'config/features/someSlice'
import { api } from 'config/services/api'

const reducers = combineReducers({
  someSlice,
  [api.reducerPath]: api.reducer,
})

const persistConfig = {
  key: 'root',
  version: 1,
  storage: AsyncStorage,
}

const persistedReducer = persistReducer(persistConfig, reducers)

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      // Redux persist
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(
      api.middleware,
    ),
})

export let persistor = persistStore(store)

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

// App.tsx for native or index.tsx
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,

Answer 2

我只是真的不会这么做。

恢复的数据可能是各种过时的数据，当用户点击 F5 时，他们通常期望数据是最新的，而不是一周前的数据或其他数据。此外，在恢复存储切片时，有关订阅的信息可能会出现问题（因为“订阅组件”永远不存在，它们也永远无法卸载，因此永远不会从存储中清除）。

因此，我会将 api 切片列入黑名单，以免其被持久化。

如果您希望缓存这些内容，请使用服务器中的缓存标头来实现。浏览器将为您完成所有缓存，但也允许用户清除缓存或使用 ctrl+shift+r 强制重新获取 - 因此浏览器的行为会超出用户的预期。