gitmyhub

redux-persist

TypeScript ★ 13k updated 2y ago

persist and rehydrate a redux store

Redux Persist saves your React app's Redux state to browser storage so users don't lose their data when they close the tab or refresh, it picks up exactly where they left off on the next visit.

TypeScriptJavaScriptReactReduxAsyncStoragesetup: easycomplexity 2/5

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.

Where it fits