rt2zz/redux-persist

★ 12,970TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Redux Persist))
    What it does
      Save Redux state
      Survives refresh
      Mobile and web
    How it works
      Wrap the reducer
      Write to storage
      Load on startup
    Config options
      Whitelist slices
      Blacklist slices
      Data migration
    Audience
      React developers
      React Native devs

mindmap root((Redux Persist)) What it does Save Redux state Survives refresh Mobile and web How it works Wrap the reducer Write to storage Load on startup Config options Whitelist slices Blacklist slices Data migration Audience React developers React Native devs

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Keep a user's shopping cart, settings, or session data alive in a React web app even after they close and reopen the browser.

USE CASE 2

Persist specific slices of a React Native app's state across app restarts using AsyncStorage with a whitelist or blacklist.

USE CASE 3

Handle data structure changes between app versions safely by writing migration functions that update old stored state to the new format.

Tech stack

TypeScriptJavaScriptReactReduxAsyncStorage

Getting it running

Difficulty · easy Time to first run · 30min

Works out of the box for web with localStorage, React Native requires installing and linking AsyncStorage as a separate peer dependency.

In plain English

Redux Persist is a JavaScript library that saves an app state between sessions. Without it, if a user closes their browser or the app, everything in Redux (the in-memory data store many React apps use) is lost. Redux Persist writes that data to storage so the next time the app loads, everything picks up where it left off. For web apps, it defaults to the browser built-in localStorage. For React Native mobile apps, it works with AsyncStorage. You can also point it at other storage engines if needed. Setup involves wrapping your existing Redux configuration with two functions: persistReducer, which intercepts state changes and saves them, and persistStore, which manages the persistence lifecycle. In React apps, a component called PersistGate delays rendering until the saved state has been loaded, preventing a flash of empty content on startup. The library gives you control over what gets saved. You can provide a whitelist (only save these parts of state) or a blacklist (save everything except these). A versioning system lets you handle changes to your data structure over time: when your app changes how it stores data, you can write migration functions to update older stored values to the new format. State reconciliation is configurable too. When saved data is loaded back in, the library can overwrite the current state, merge it shallowly one level deep (the default), or merge it two levels deep, depending on your app structure. Redux Persist has been widely used for several years. A new maintainer took over in 2021 and has been working to modernize the project infrastructure and improve documentation ahead of a planned version 7.

Copy-paste prompts

Prompt 1

I have a React app using Redux and I want to save the user's theme and language preferences to localStorage so they survive a page refresh. Show me how to set up Redux Persist.

Prompt 2

I am using Redux Persist in a React Native app and I only want to save the auth slice, not the entire state. How do I configure a whitelist?

Prompt 3

My Redux Persist setup shows a flash of empty content on startup before the saved state loads. How do I use PersistGate to prevent that?

Prompt 4

I released a new version of my app that changed the shape of the Redux state. How do I write a Redux Persist migration so existing users' saved data still works?

Prompt 5

Redux Persist is saving a slice that contains sensitive user data I do not want stored. How do I blacklist just that slice while persisting everything else?

Open on GitHub → Explain another repo

← rt2zz on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.