Q342: How do you persist Redux state? - React & Modern Frontend (445 Qs)

redux-persist is the standard library for persisting and rehydrating a Redux store across page reloads/app restarts. It wraps your root reducer so selected slices are automatically saved to storage (e.g., localStorage on web, AsyncStorage on React Native) and restored on startup.

javascript

import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // localStorage

const rootReducer = combineReducers({ user: userReducer, cart: cartReducer });

const persistConfig = {
key: "root",
storage,
whitelist: ["cart"], // only persist the `cart` slice
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({ serializableCheck: false }),
});

export const persistor = persistStore(store);

jsx

// index.js
import { PersistGate } from "redux-persist/integration/react";

<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
  <App />
</PersistGate>
</Provider>;

Key points: use whitelist/blacklist to persist only the slices that need it (e.g., auth token, cart), disable serializableCheck for the persistence actions RTK flags by default, and wrap the app in <PersistGate> so rendering waits until the persisted state has been rehydrated.