What happens when i use RTK Query with redux-persist? - redux

Question

What will happen when i use Redux Toolkit Query with redux-persist?
Will it use the persisted state or will the state be refetched?

Answer 1

There is an official guide for this now. At the time of writing this, you could configure it this way:
// 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

I just really wouldn't do it.
That restored data could be all kinds of stale and when a user hits F5 they usually expect data to be up-to-date, not a week old or something. Also, while the store slice is restored, information about subscriptions might be problematic (because the "subscribing components" never exist, they can also never unmount and thus get never cleaned from the store).
So, I'd blacklist the api slice from being persisted.
If you want that stuff to be cached, do it with cache headers in your server. The browser will do all the caching for you, but also allow the user to clear the cache or force a refetch with ctrl+shift+r - so the browser would just behave more than the user expects.

Answer 3

Use extractRehydrationInfo like this:
import { REHYDRATE } from 'redux-persist'
export const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
extractRehydrationInfo(action, { reducerPath }) {
if (action.type === REHYDRATE) {
return action.payload[reducerPath]
}
...
},
Full official guide here.