How do you persist Redux state?

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.

     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);
     

     // 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.