3 Powerful Redux-Persist & React Router v7 Patterns 2025

// store/persistConfig.js
import { createTransform } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// This transform only saves the 'token' field from the 'auth' slice.
const authTransform = createTransform(
  (inboundState, key) => {
    if (key === 'auth') return { token: inboundState.token };
    return inboundState;
  },
  (outboundState, key) => {
    // No transformation on rehydration
    return outboundState;
  },
  { whitelist: ['auth'] }
);

// This transform only saves the 'theme' field from the 'settings' slice.
const settingsTransform = createTransform(
  (inboundState, key) => {
    if (key === 'settings') return { theme: inboundState.theme };
    return inboundState;
  },
  (outboundState, key) => outboundState,
  { whitelist: ['settings'] }
);

export const persistConfig = {
  key: 'root',
  storage,
  // We only need to whitelist the slices we are transforming.
  whitelist: ['auth', 'settings'], 
  transforms: [authTransform, settingsTransform],
};

// routes.js
import { getProfileData } from './api';

// A higher-order function to give the loader access to the store
export const createProfileLoader = (store) => async () => {
  const { token } = store.getState().auth;
  if (!token) {
    // Redirect to login if no token is available after rehydration
    return redirect('/login');
  }
  const profile = await getProfileData(token);
  return { profile }; // Data is passed to the component via useLoaderData()
};

// In your router setup:
// const profileLoader = createProfileLoader(store);
// { path: '/profile', element: <Profile />, loader: profileLoader }

The Benefit

Your app starts lightning-fast because rehydration is minimal. Users always see the freshest data on navigation, and your persisted state remains lean and predictable.

2. Optimistic UI with Router Actions: Instantaneous Feedback

The Problem: The Waiting Game

A user adds a comment and hits "Submit." What happens next? Usually, a loading spinner appears while the app waits for the server to confirm the action. This delay, even if short, makes the UI feel sluggish and unresponsive.

The Pattern: Update UI First, Sync Later

With React Router's action functions, we can create optimistic updates. The UI pretends the server request was instantly successful. We immediately update the Redux store, and if something goes wrong, we simply roll it back.

1. User Submits Form: The Router's <Form> component triggers an action.
2. Dispatch Optimistic Update: Inside the action, immediately dispatch a Redux action to add the new data (e.g., the comment) to the state. The UI re-renders instantly.
3. Make API Call: After dispatching, make the actual network request.
4. Handle Outcome: If successful, you might dispatch a success action to update the item with a real ID from the server. If it fails, dispatch a rollback action to remove the optimistic update and show an error.

// routes.js
import { addComment } from './api';
import { commentAdded, commentAddFailed } from '../store/commentsSlice';
import { nanoid } from '@reduxjs/toolkit';

export const createCommentAction = (store) => async ({ request }) => {
  const formData = await request.formData();
  const text = formData.get('commentText');
  const optimisticId = nanoid(); // Generate a temporary client-side ID

  // 1. Optimistically update the UI
  store.dispatch(commentAdded({ id: optimisticId, text, status: 'pending' }));

  try {
    // 2. Make the real API call
    const newComment = await addComment({ text });
    // 3. (Optional) Update the comment with the real server data
    // store.dispatch(commentUpdate({ oldId: optimisticId, newComment }));
    return { ok: true };
  } catch (error) {
    // 4. If it fails, roll back the change
    console.error('Failed to add comment:', error);
    store.dispatch(commentAddFailed({ id: optimisticId }));
    return { ok: false, error: 'Could not save comment.' };
  }
};

// In your component:
// <Form method="post">
//   <textarea name="commentText" />
//   <button type="submit">Submit</button>
// </Form>

The Benefit

The application feels incredibly fast and responsive. From the user's perspective, their action was completed instantly. This pattern significantly improves perceived performance.

3. State-Driven Redirects with Loaders: Clean & Declarative Routing

The Problem: The `useEffect` Flash

How do you protect a route like /dashboard? The old way often involved a useEffect hook that checks for an auth token. This works, but it causes a noticeable flash: the component renders briefly, the effect runs, and *then* the user is redirected. The same happens when redirecting an authenticated user away from the /login page.

The Pattern: Pre-Render Route Validation

React Router's loader functions run before your component renders. This makes them the perfect place to handle authentication checks and redirects based on Redux state.

1. Define a Loader: Attach a loader to the route you want to protect or redirect from.
2. Access Redux State: The loader checks the relevant state from the Redux store (e.g., store.getState().auth.token).
3. Return a Redirect: If the condition is met (e.g., no token for a protected route), the loader returns a redirect() from React Router. The component never even tries to render.

// routes.js
import { redirect } from 'react-router-dom';

// Loader for a protected route like /dashboard
export const createProtectedLoader = (store) => () => {
  const { token } = store.getState().auth;
  if (!token) {
    // If no token exists after persist rehydration, send to login.
    return redirect('/login?redirectTo=/dashboard');
  }
  return null; // All good, render the component.
};

// Loader for a public-only route like /login
export const createPublicOnlyLoader = (store) => () => {
  const { token } = store.getState().auth;
  if (token) {
    // If user is already logged in, send them to the dashboard.
    return redirect('/dashboard');
  }
  return null;
};

// In your router setup:
// { path: '/dashboard', element: <Dashboard/>, loader: createProtectedLoader(store) }
// { path: '/login', element: <Login/>, loader: createPublicOnlyLoader(store) }

The Benefit

Routing logic is declarative, co-located with your routes, and completely eliminates the UI flash. It's more secure, more efficient, and far easier to reason about than scattered useEffect hooks.

4. Comparison: Old vs. New Patterns

Let's visualize the shift in thinking:

Concern	The Old Way (in Component)	The New Pattern (in Route)
Data Fetching	useEffect with fetch logic, manual loading/error state management.	loader function fetches data before render. Data accessed with useLoaderData.
Form Submission	onSubmit handler, useState for loading state, imperative API calls.	Declarative <Form> component, action function handles logic, optimistic updates in Redux.
Protected Routes	Wrapper component or useEffect hook that checks state and calls navigate(). Causes UI flash.	loader function checks state and returns a redirect(). No component render, no flash.

Conclusion: Tying It All Together

These three patterns—Smart Persisting, Optimistic Actions, and State-Driven Redirects—are more than just clever tricks. They represent a paradigm shift in building React applications. By moving state-dependent logic from the component lifecycle to the routing layer, we create a clear and robust data flow that is easier to debug, test, and maintain.

By embracing the data-loading capabilities of modern React Router and combining them with the surgical precision of Redux-Persist transforms, you're not just writing code for 2025; you're building applications that are fundamentally more performant, resilient, and enjoyable for your users. Stop wrestling the octopus and start conducting the orchestra.